Perintah Print pada PHP

Pemrograman Web PHP terkadang dalam suatu program kita membutuhkan dengan yang namanya sistem print untuk mencetak data penting dan dijadikan laporan.

Untuk melakukan itu caranya sangat mudah kita hanya menambahkan Script berikut ini :

<script>
window.print();
</script>

Letakan script diatas di paling bawah kode yaitu </html>, ini hasilnya akan langsung terjadi ke print out tanpa melakukan perintak klik button print terlebeih dahulu, biar lebih jelas lihat contoh dibawah ini, saya menggunakan Dreamweaver CS6 sebagai tools editor coding. Simpan file coding anda "print.php"














setelah anda jalankan di localhost maka akan terjadi seperti di bawah ini :

Jika anda ingin menggunakan sebuah button untuk eksekusi melakukan print maka contohnya coding php seperti dibawah ini dan Simpan dengan file "print.php"

maka akan menghasilkan sebuah area kerja jika di jalankan seperti dibawah ini :

ketika tombol print dijalankan maka akan menghasilkan sebuah perintah print out seperti dibawah ini

Demikianlah contoh perintah coding Print dalam bentuk PHP. Semoga bermanfaat dan Tolong di share ke teman-teman yah...

Variabel dan Tipe Data pada PHP

Pengertian Variabel dalam PHP

Dalam pemograman, variabel adalah suatu lokasi penyimpanan (di dalam memori komputer) yang berisikan nilai atau informasi yang nilainya tidak diketahui maupun telah diketahui (wikipedia).
Dalam defenisi bebasnya, variabel adalah kode program yang digunakan untuk menampung nilai tertentu. Nilai yang disimpan di dalam variabel selanjutnya dapat dipindahkan ke dalam database, atau ditampilkan kembali ke pengguna.
Nilai dari variabel dapat di isi dengan informasi yang diinginkan dan dapat dirubah nilainya pada saat kode program sedang berjalan. Sebuah variabel memiliki nama yang digunakan untuk mengakses nilai dari variabel itu. Jika anda memiliki pengetahuan dasar tentang bahasa pemograman, tentunya tidak asing dengan istilah variabel.
Sama seperti variabel dalam bahasa pemograman lainnya, variabel dalam PHP digunakan untuk menampung nilai inputan dari user, atau nilai yang kita definisikan sendiri. Namun PHP memiliki beberapa aturan tentang cara penggunaan dan penulisan variabel.

Aturan Penulisan Variabel dalam PHP

1. Penulisan variabel harus diawali dengan tanda $

Variabel di dalam PHP harus diawali dengan dollar sign atau tanda dollar ($).
Setelah tanda $, sebuah variabel PHP harus diikuti dengan karakter pertama berupa huruf atau underscore (_), kemudian untuk karakter kedua dan seterusny bisa menggunakan huruf, angka atau underscore (_). Dengan aturan tersebut, variabel di dalam PHP tidak bisa diawali dengan angka.
Minimal panjang variabel adalah 1 karakter setelah tanda $.
Berikut adalah contoh penulisan variabel yang benar dalam PHP:

<?php    $i;    $nama;    $Umur;    $_lokasi_memori;    $ANGKA_MAKSIMUM; ?>

Dan berikut adalah contoh penulisan variabel yang salah:

<?php    $4ever; //variabel tidak boleh diawali dengan angka     $_salah satu; //varibel tidak boleh mengandung spasi    $nama*^; //variabel tidak boleh mengandung karakter khusus: * dan ^ ?>

---

2. Variabel dalam PHP bersifat case sensitif

PHP membedakan variabel yang ditulis dengan huruf besar dan kecil (bersifat case sensitif) , sehingga $belajar tidak sama dengan $Belajar dan $BELAJAR, ketiganya akan dianggap sebagai variabel yang berbeda.
Untuk menghindari kesalahan program yang dikarenakan salah merujuk variabel, disarankan menggunakan huruf kecil untuk seluruh nama variabel.

<?php    $andi="Andi";    echo $Andi; // Notice: Undefined variable: Andi ?>

Dalam contoh diatas, PHP mengeluarkan error karena tidak menemukan variabel $Andi.

---

3. Cara Memberikan Nilai kepada Variabel

Sama seperti sebagian besar bahasa pemograman lainnya, untuk memberikan nilai kepada sebuah variabel, PHP menggunakan tanda sama dengan (=). Operator ‘sama dengan‘ ini dikenal dengan istilah Assignment Operators.
Perintah pemberian nilai kepada sebuah variabel disebut dengan assignment. Jika variabel tersebut belum pernah digunakan, dan langsung diberikan nilai awal, maka disebut juga dengan proses inisialisasi.
Berikut contoh cara memberikan nilai awal (inisialisasi) kepada variabel:

1 2 3 4 5

<?php    $nama = "andi";    $umur = 17;    $pesan = "Saya sedang belajar PHP di duniailkom.com"; ?>

---

4. Variabel dalam PHP tidak memerlukan deklarasi terlebih dahulu

Jika anda pernah mempelajari bahasa pemograman desktop seperti Pascal, C, C++, dan Visual Basic, di dalam bahasa pemograman tersebut, sebuah variabel harus dideklarasikan terlebih dahulu sebelum digunakan.
Namun di dalam PHP, variabel tidak perlu deklarasikan terlebih dahulu. Anda bebas membuat variabel baru di tengah-tengah kode program, dan langsung menggunakannya tanpa di deklarasikan terlebih dahulu.

<?php    $andi="Andi";    echo $andi; ?>

PHP memiliki keyword var untuk mendefenisikan variable, keyword ini digunakan untuk PHP versi 4 kebawah. PHP versi 5 tidak membutuhkan keyword ini, dan penggunaannya akan menghasilkan error, seperti contoh berikut ini:

<?php    // kode program dibawah ini akan menghasilkan error    // Parse error: syntax error, unexpected 'var' (T_VAR)    var $andi="Andi";    echo $andi; ?>

---

5. Variabel dalam PHP tidak bertipe

Dalam kelompok bahasa pemograman, PHP termasuk Loosely Type Language, yaitu jenis bahasa pemograman yang variabelnya tidak terikat pada sebuah tipe tertentu.
Hal ini berbeda jika dibandingkan dengan bahasa pemograman desktop seperti Pascal atau C, dimana jika anda membuat sebuah variabel bertipe integer, maka variabel itu hanya bisa menampung nilai angka, dan anda tidak akan bisa mengisinya dengan huruf.
Di dalam PHP, setiap variabel bebas diisi dengan nilai apa saja, seperti contoh berikut:

<?php    $a = 17; // nilai variabel a berisi angka (integer)    $a = "aku"; // nilai variabel a diubah menjadi kata (string)    $a = 17.42; // nilai variabel a diubah menjadi desimal (float) ?>

---

6. Variabel Sistem PHP (Predefined Variables)

Predefined Variables atau terjemahan bebasnya Variabel Sistem PHP, adalah beberapa variabel yang telah didefenisikan secara sistem oleh PHP, dan kita sebaiknya tidak membuat variabel dengan nama yang sama.
Beberapa contoh Predefined Variables dalam PHP adalah:
$GLOBALS , $_SERVER , $_GET , $_POST , $_FILES , $_COOKIE , $_SESSION , $_REQUEST , $_ENV, $php_errormsg, $HTTP_RAW_POST_DATA, $http_response_header, $argc, $argv, $this.
Daftar list Predefined Variables tersebut saya ambil dari manual PHP di http://www.php.net/reserved.variables, di dalam manual tersebut juga dijelaskan bahwa mungkin masih terdapat beberapa variabel sistem PHP selain list diatas, hal ini tergantung dengan jenis web server, versi PHP yang digunakan, dan beberapa faktor lainnya. Namun kebanyakan varibel sistem PHP menggunakan tanda $_ pada awal nama variabel, namun tidak selalu.

---

Cara Menampilkan Nilai Variabel

Untuk menampilkan nilai atau isi dari variabel, kita tinggal menampilkannya dengan perintah echo atau print, seperti berikut ini:

<?php    $a='Saya Sedang belajar PHP';    $b=5;         print $a;    echo $b; ?>

Hasil yang didapat adalah:

1	Saya Sedang belajar PHP5

Perhatikan bahwa kedua nilai variabel ditampilkan tanpa spasi diantaranya. Hal ini terjadi karena di dalam program PHP saya tidak menyisipkan spasi untuk pemisah diantara kedua variabel.
Walaupun kita akan membahasnya lebih lengkap pada tutorial mengenai string, kita juga bisa menampilkan variabel langsung di dalam string jika string tersebut berada di antara tanda kutip dua (“):

<?php    $a=5;    $b="Sedang belajar PHP $a";    echo $b;    // hasil: Saya Sedang belajar PHP 5 ?>

---

Variabel dapat dikatakan sebagai inti dari sebuah bahasa pemograman. Karena melalui variabel inilah kita memanipulasi data inputan agar menjadi nilai yang diinginkan. Selain variabel, PHP juga menyediakan sebuah solusi lain untuk menampung nilai data dengan konstanta (constant)

Pemahaman Dasar PHP

Tags PHP

Kita bisa menuliskan script php di dalam sebuah dokument html ataupun di halaman php yang brediri sendiri. tapi kita harus menggunakan tags PHP agar script php yg kita buat dapat dikenali sebagai bahasa php dan di proses oleh web server. kita bisa menggunakan tag :
<?php  …   ?>
<?php  digunakan untuk membuka dan menadakan awal dari script php dan ?>   digunakan untuk menutupnya. selain itu banyak juga yang menggunakan short tag, jadi hanya menggunakan <? dan ?>. meskipun bisa, tidak dianjurkan menggunakan short tags karena di beberapa web server default itu short tag tidak aktif atau disable. ketika kita ingin menggunakan cara tersebut kita harus memastikan pengaturan short tags di file configrasi php.ini sudah kita aktifkan. karena jika belum bisa menyebabkan script tidak tereksekusi bahkan bisa menyebabkan error.
dan berikut yang saya dapat dari php manual, mungkin bisa jadi referensi juga :
1.  <?php echo 'if you want to serve XHTML or XML documents, do it like this'; ?>
2.  <script language="php">
echo 'some editors (like FrontPage) don\'t
like processing instructions';
</script>
3.  <? echo 'this is the simplest, an SGML processing instruction'; ?>
<?= expression ?> This is a shortcut for "<? echo expression ?>"
4.  <% echo 'You may optionally use ASP-style tags'; %>
<%= $variable; # This is a shortcut for "<% echo . . ." %>
selain itu dengan php kita juga membuat seperti ini :

1 2 3 4 5 6

$expression=true;  //kita definisikan nilai ekspresinya <?php if ($expression == true); ?>   jika nilai = True maka Text ke 1 ini akan ditampilkan di browser. <?php else; ?>   jika nilai = false maka Text ke 2 ini akan ditampilkan di browser. <?php endif; ?>

Komentar di PHP

Kita juga bisa menuliskan komentar di dalam script php, ada 2 cara yaitu :
1. mengunakan //.. ,  ini bekerja untuk 1 baris code
2. menggunakan /*  .. */  ini bisa kita untuk membuat komentar yang terdiri dari lebih dari 1 baris

1 2 3 4 5 6 7 8 9 10 11 12

<?php   // komentar pertama   // komentar kedua  echo "contoh membuat komentar di php";   /* komentar awal   komentar di tengah   komentar di akhir */ ?>

Mungkin sebagai dasar, itu cukup bermanfaat agar bisa melanjutkan ke materi yang lebih dalam lagi. jika ada pertanyaan silahkan komentar atau hub saya langsung. semoga bisa saling membantu.
setalah ini mungkin akan saya ulas mengenai Variable di PHP.

Pemahaman CSS dan cara kerja CSS

Pengertian CSS Dasar

Sebelum mempelajari CSS anda harus mengetahui HTML DASAR  terlebih dahulu . CSS singkatan dari Cascading Style Sheet . CSS merupakan sebuah bahasa pemrograman yang fungsinya untuk menstrukturkan komponen-komponen web yang beragam sesuai dengan keinginan kita.

Fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.

cara kerja css

cara kerja css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html

syntax atau aturan penulisan

aturan penulisan css itu sangatlah simple contohnya seperti ini

selector_id{
property:value;
}

selector_class {
property:value;
}

tag_html {
property:value;
property_lagi:valuenya; /*sobat bisa menambah beberapa property lagi, yah kira-kira sesuai kebutuhan*/
}

keterangan

• ketiga aturan diatas hanya kita gunakan sesuai kebutuhan saja
• sebenarnya masih ada yang lain, berhubung ini hanya pemahaman dasar jadi yang dibahas yang penting-penting saja
• contohnya, diakhir tulisan ini

keterangan syntax

• diawali dengan selector atau tag_html
• kemudian tambahkan { (buka kurung karawal)
• abis itu barulah kita tulis propertynya
• setelah menulis propertynya lanjutkan dengan : (titik dua) anggap seperti sama dengan pada atribut html
• setelah : (titik dua), masukan valuenya
• sehabis menulis value tambahkan ; (titik koma), fungsinya untuk mengakhiri property dan value
• next, jika kita tidak menambahkan property:value lagi
• akhiri dengan } (tutup kurung karawal) fungsinya munutup selector

property dan value css

ini adalah bagian terpenting dalam css, tanpa selector dan value sama saja dengan mandi tanpa air(kalau tanpa sabun masih mending ).
misal kita ingin merubah warna text, property yang kita gunakan adalah color: sedangkan valuenya bisa rgb, hex color atau color.
misal lagi kita ingin merubah ukuran font, property yang kita gunakan adalah font-size:, sedangkan valuenya bisa length(px). misalnya lagi kita ingin merubah warna latar belakang, maka property yang kita gunakan adalah background-color:sedangkan valuenya bisa rgb, hex color atau color.
contoh

h1{
color ; red;
background-color : green;
font-size : 60px ;
}

keterangan

• yang berwarnah merah adalah property
• sedangkan yang berwarna biru adalah valuenya
• setiap peroperty sudah memiliki value masing-masing, jadi jika sobat menggunakan property margin lalu valuenya #fff(white) itu sama dengan salah besar
• contohnya, diakhir tulisan ini
• property css itu sangat banyak, dari sekian banyak property itu kita ngga mesti menggunakan semuanya(ya kira-kira sesuai kebutuhan)

letak penulisan css

untuk belajar css, sahabat harus bisa html dulu(minimal tau penulisan serta cara karjanya).
contoh dibawah adalah penulisan css dalam internal style

<html>
<style type="text/css">
disini tempat menulis code css, ada beberapa cara untuk menulis css, yang ini adalah internal style
</style>
<body>
<!-- tag tag html disini -->
</body>
</html>

keterangan

• rekomendasi dari www.w3schools.com ialah penulisan style css terletak antara <head> dan </head>
• namun, dimanapun sobat menulis kode cssnya, browser tetap akan menjalankan css tadi jika syntaxnya benar, misal letaknya di <body> disini </body>
• sekarang itu browser sudah pada canggih-canggih beda ketika netscape masih berdiri

komentar css
sama seperti html, kita juga bisa menulis komentar pada css, tahukan fungsi komentar itu
penulisan komentar css itu seperti ini /* disini komentar css */
keterangan

• diawali dengan /(garis miring)
• kemudian *(bintang) atau shift + 8
• abis itu komentar anda
• setelah memasukkan komentar
• sebagai penutupnya tambahkan *(bintang) atau shift + 8
• disusul dengan /(garis miring)
• lihat contoh

<style type="text/css">
body{
color:red;/*komentar css*/
background:lime;/*komentar css*/
/* bisa juga disini komentar css, color adalah property css, sedangkan blue adalah value. fungsi dari komentar adalah untuk menudahkan kita dalam mengingat code yang kita tulis, dimana browser tidak akan mmenampilkan/menjalankan komentar yang kita tulis */
}
</style>
<body>
<!-- tag tag html disini -->
</body>
</html>

tidak berpengaruh, baku

contoh ini

<style type="text/css">
body{
color:
red;
background:lime;
}</style>

dan contoh yang ini

<style type="text/css">body{color:blue;background:lime;}</style>

sama saja
keterangan

• contoh yang diatas itu bernilai sama
• atau css itu ngga ngaruh terhadap enter(line break) ataupun spasi
• yang perlu diperhatikan hanyalah karakter ini { : ; }
• kita hanya akan menggunakan spasi jika property dan valuenya ditulis dengan shorthand

contoh dan cara kerja css
di bawah ada beberapa dua contoh penggunaan css

contoh 1(simple)

<html>
<style type="text/css">
body{/*value default dari tag <body> adalah warna latar putih, dengan css kita bisa merubahnya*/
background:lime;/* warna latar belakang */
padding-left:60px;/* jarak kiri*/
}
h1{/*dengan ini kita merubah nilai default tag <h1> sesuai dengan property yang kita tambahkan */
color:red;/* warna */
font-family:Times, serif;/* font family*/
font-style: italic;/* font style*/
font-weight: bold;/* font weigt */
font-size: 30px;/* ukuran font*/
}
p{
color:blue;/* warna*/
font-family:arial;/* font family*/
font-style: normal;/* font style*/
font-weight: bold;/* font wight*/
font-size: 50px;/* ukuran font*/
}
</style>
<body>
<h1>ini adalah judul </h1>
<p>ini adalah paragraf</p>
</body>
</html>

untuk menjalankan codenya

• copy kode diatas
• buka program notepad
• paste
• lalu save as(pilih all files) dengan nama belajarcss.html(pastikan ekstensi filenya adalah [dot]html)
• setelah itu jalankan menggunakan browser pavorit anda(ff, ie, opera).
• setelah hasilnya dilihat, coba edit masing-masing property valuenya yang terletak antara : dan ;
• simpan
• kemudian lihat hasil editan sobat

contoh2(sedikit rumit)

perhatikan markup style berikut

<html>
<head>
<title>contoh2 css</title>
<style type="text/css">
/*misal tag body*/body{/*style ini untuk body*/
background-color:pink;/* warna latar belakang body pink*/
margin:0 auto 10px auto;/* jarak-luar atas 0, kiri dan kanan auto, sedangkan bawah 10px */
padding:5px;/* jarak/batas dalam masing-masing 5px*/
width:800px;/* lebar 800px*/
}
/* ini adalah komentar css */
#pembentuk-headernya{/*style ini untuk pembentuk header*/
height:200px;/* tingginya 200px*/
clear:both;/*fungsi ini agar agar ruas kanan-dankiri tidak bisa diisi dengan bidang lain */
margin:0 auto;/*jarak luar atas bawah 0, kiri-kanan auto */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
/*ukuran text*/font-size:40px;
color:blue;/*warna text*/
}
/*bagian header selesai*/
/* ini adalah komentar css */
#sidebar-kiri{/*style ini untuk sidebar kiri */
min-height:1000px;/* tinggi minimal*/
float:left;/*menekan kekiri */
width:200px;/*lebar 200px */
margin:10px 0;/*jarak luar atas-bawah 10px, kiri-kanan 0 */
background-color:white;/* warna latar belakang putih*/
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
/*ukuran text*/font-size:60px;
color:red;/*warna text*/
}
/*bagian sidebar-kiri selesai*/
/* ini adalah komentar css */
/*mulai badan utama*/
#badan-utamanya{/*style ini untuk badan utama, atau yang terletak di tengah*/
min-height:1000px;/* tinggi minimal*/
float:left;/* menekan kekiri*/
width:400px;/* lebar 400px*/
margin:10px;/*jarak luar masing-masing 10px */
background-color:white;/*warna latar belakang putih */
}
#badan-utamanya .isinya{/*style ini untuk isi badan*/
/*style ini untuk isi badan*/
margin:10px;/* jarak luar masing-masing 10px*/
/*ukuran text*/font-size:55px;
color:green;/*warna text*/
}
/* ini adalah komentar css */
/*mulai sidebar kanan*/
#sidebar-kanan{/*style ini untuk sidebar kanan*/
min-height:1000px;/* tinggi minimal*/
float:right;/* menekan ke kanan*/
width:180px;/* lebar 180px*/
margin:10 0 0 0;/*jarak luar atas 10, kiri-kanan-bawah 0 */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
/*ukuran text*/font-size:40px;
color:silver;/*warna text*/
}
/* ini adalah komentar css */
#pembentuk-footer{/*style ini untuk pembentuk footer atas, saya membuat tiga footer widget*/
clear:both;/*fungsi style ini agar ruang kiri-kanan tidak bisa diisi*/
background-color:white;/*warna latar belakang*/
/*ukuran text*/font-size:20px;
color:orange;/*warna text*/
}
#pembentuk-footer .misalwidgetnya{/*style ini untuk widget dalama footer*/
float:left;/*menekan ke kiri-atas*/
width:32%;/*lebarnya 32%, jika lebar tag sebelumnya 1000px, maka lebar ini menjadi 320px*/
min-height:300px;/*tinggi minimal*/
background-color:pink;/*warna latar belakang*/
margin:5px;/*jarak luar masing-masing 5px */
}
/* ini adalah komentar css */
#by-indam{/*style ini untuk yang paaaaaaaaaaaaaaaaaaaaaaaaling bawah, ituloh yang titititittititik*/
clear:both;/*fungsi style ini agar ruang kiri-kanan tidak bisa diisi*/
min-height:40px;/*minimal tinggi 40px */
margin:10px auto;/* jatak luar atas dan bawah 40px, kiri-kanan auto*/
background-color:white;/* warna latar belakang putih*/
-moz-border-radius-bottomright:10px;/*style ini hanya untuk firefox */
-moz-border-radius-bottomleft:10px;/*style ini hanya untuk firefox */
}
#by-indam p{/*style ini untuk tag p dalam tititititiititittitiitik*/
text-align:right;/*text rata kanan */
margin:0;/*jarak luar masing-masing 0 */
padding:5px 10px;/* jarak dalam atas-bawah 5px, kiri-kanan 10px*/
}
/* ini adalah komentar css */
</style>
</head>
<body>
<div id="pembentuk-headernya">
header
</div>
<!--------->
<!-- dari sini sidebar kiri ------------->
<div id="sidebar-kiri">
sidebar kiri
</div>
<!-- //sampai disini sidebar kiri ------------->
<!--------->
<!-- dari sini badan utama -->
<div id="badan-utamanya">
<div class="isinya">
badan post
</div>
<!-- //sampai disini isi badan ------------->
</div>
<!--------->
<!-- ////sampai pembentuk badan utama -------------->
<!--------->
<!-- dari sini sidebar kanan -->
<div id="sidebar-kanan">
sidebar kanan
</div>
<!--// //sampai disini sidebar kanan ------------->
<div style="clear:both;/* */"></div>
<!--------->
<!-- dari sini footer pertama/atas------------->
<div id="pembentuk-footer">
<!-- dari sini widget dalam footer atas ---->
<!--------->
<div class="misalwidgetnya">
footer kiri
</div>
<!--------->
<div class="misalwidgetnya">
footer kanan
</div>
<!--------->
<div class="misalwidgetnya">
footer tengah
</div>
<!--------->
<div style="clear:both;/* */"></div>
</div>
<!--------->
<div id="by-teguh">
<p>yah, seperti inilah tampilanya, simple kan? silakan edit untuk belajar. salam</p>
<!---------></div>
</body>
</html>

untuk menjalankan codenya

• copy kode diatas
• buka program notepad
• paste
• lalu save as(pilih all files) dengan nama belajarcss2.html(pastikan ekstensi filenya adalah [dot]html)
• setelah itu jalankan menggunakan browser pavorit anda(ff, ie, opera).
• setelah hasilnya dilihat, coba edit masing-masing property dan valuenya yang terletak antara : dan ;
• dari /* sampai */ adalah komentar css
• simpan
• kemudian lihat hasil editan sobat

bandingkan jika ngga menggunakan css, coba hapus semua code antara

<style type="text/css"> sampai </style>

• simpan
• lalu lihat hasilnya
• nah, gimana sudah tahukan fungsi css itu?
• saya harap kita semua tahu(minimal apa itu css)

untuk belajar alangkah baiknya jika sobat sedikit berani mengutak-atik blog sendiri!

bagaimana cara edit css wordpress

• appearance
• pilih editor
• klik style.css(biasanya ada style lain, tergantung themes)
• coba edit valuenya yang terletak antara : dan ;

bagaimana cara edit css blogspot?

• langsung ke edit html
• cari <b:skin> sampai </b:skin>
• itu adalah style css pada blogspot
• coba edit valuenya yang terletak antara : dan ;

mungkin sobat bertanya fungsi dari text yang berwarnah merah ini

#misal{
property:value;
property:value;
property:value;
}

.misal{
property:value;
property:value;
property:value;
}

tag_html{
property:value;
property:value;
property:value;
}

• anggap saja itu adalah bentuk yang akan sobat ubah, misal #sidebar, #header, #footer.

jadi misal sobat ngin merubah sidebar, cari saja seperti ini

#sidebar{
property:value;/*edit valuenya, untuk merubah bentuk dan tampilan*/
property:value;
property:value;
}

.sidebar{
property:value;/*edit valuenya, untuk merubah bentuk dan tampilan*/
property:value;
property:value;
}

• hal yang sama berlaku untuk #header, footer, sidebarleft-right, dan lain-lain
• sebenarnya yang berwarnah merah itu adalah selector(mungkin akan kita bahas kedepanya)
• selector_id_maupun_class(text merah) itu ngga mesti berbasa inggris(sidebar, header, footer) yang terpenting adalah nilai atribut id dan classnya sesuai dengan style yang sobat tambahkan
• misal
  • <div id=”sidebar”
  • <div id=”header”
  • <div id=”footer”
  • <div class=”sidebar”
  • <div class=”footer”
• oia, saya pernah membuat template blogspot berbahasa indonesia(selectornya) untuk yang pengen belajar bisa menggunakan tempalte itu, downloadnya di blogtempalte4u.com dan di zoomtempalte.com coba cari template dengan nama slow pink white(itupun kalau mau)

tambahan

• ada beberapa sahabat saya yang mengatakan css itu rumit, sebenarnya sih ngga rumit hanya saja dia(sahabat saya) ngga paham property css, jadi dalam belajar css, sobat juga harus paham fungsi masing-masing property serta value css itu sendiri
• jika sobat ingin menguasai css, alangkah baiknya jika codenya diketik pakai jari(usahakan hindari copy code)
• selalu perhatikan karakter ini { : ; }
• gunakan editor code yang simple, untuk menulis code css sebaiknya gunakan notepad++(downloadnya cari di google free). jika sobat punya uang bisa menggunakan dreamweaver(not recoment)
• browser, sebaiknya gunakan firefox untuk melihat hasil editan. ini karena firefox menggunakan standard yang direkomendasikan oleh www.w3schools.com
• cobalah membuat website statis dengan css, jangan cuma ngedit. sobat kan punya komputer dan tanpa koneksi internetpun kita bisa belajar css
• jika punya waktu luangkan waktu anda untuk ngedit css blog anda sendiri, css ini sangat mengasikan apalagi jika digabung dengan htmldom dan dinamic html(dhtml)

semoga bermanfaat

Pemahaman HTML Dasar

HTML adalah singkatan dari Hyper Text Markup Language.

Hyper Text :  metode dimana Anda dapat bergerak leluasa di web - dengan mengklik pada sebuah teks khusus yang disebut "hyperlink" yang membawa Anda ke halaman berikutnya. Kata hiper itu sendiri berarti tidak linear - yaitu Anda dapat pergi ke tempat manapun di Internet kapanpun Anda inginkan dengan hanya mengklik sebuah link (sebuah teks yang berfungsi sebagai link).

Markup Language : adalah apa yang tag HTML lakukan dengan text, ini sama seperti Anda menandai bold text, italics text, headings, bullets, dst. ( cara penulisan informasi tata letak dalam dokumen ).

Jadi Apa itu HTML ? 

"HTML adalah "bahasa ibu" dari browser Anda.

HTML digunakan untuk membuat sebuah website.
Dengan HTML, dapat menggambarkan struktur halaman menggunakan bahasa markup, seperti “paragraph,” “list,” “table,” "heading", "text", "photos",  dst.
Web browser (seperti Google Chrome, Internet Explorer, Firefox, Safari) akan membaca dokumen HTML dan menampilkannya sebagai halaman web.
Browser tidak menampilkan tag HTML, tetapi menggunakan tag itu untuk menafsirkan isi halaman web tersebut.

HTML adalah bahasa markup.

• Sebuah bahasa markup terdiri dari seperangkat markup tag
• Tag menggambarkan isi dokumen (document content)
• Dokumen HTML berisi HTML tags dan plain text (teks biasa)
• Dokumen HTML ini juga disebut halaman web (web page)

Contoh sebuah dokumen HTML sederhana:

<!DOCTYPE html>
<html>
<head>
<title>Judul Website</title>
</head>
<body>
<h1>First Heading</h1>
<p>First paragraph</p>
</body>
</html>

 Keterangan :

!DOCTYPE deklarasi mendefinisikan jenis/versi dokumen (ini contoh versi terbaru HTML5)

Teks antara tag <head> dan </ head> merupakan wadah untuk semua elemen head

Teks antara tag <title> dan </title> menjelaskan nama/judul website

Teks antara tag <html> dan </ html> menjelaskan halaman web
Teks antara tag <body> dan </ body> adalah isi halaman yang terlihat
Teks antara tag <h1> dan </ h1> ditampilkan sebagai judul pertama
Teks antara tag <p> dan </ p> ditampilkan sebagai sebuah paragraf pertama

Tag HTML 

• Tag HTML juga biasa disebut dengan  markup tag HTML
• Tag HTML adalah kata kunci (nama tag) yang dikelilingi oleh kurung sudut (angle brackets) seperti: <html>
• Tag HTML biasanya diterapkan berpasangan seperti <b> dan </ b>

<b> juga disebut sebagai tag awal/tag pembuka
</b> disebut juga sebagai tag akhir/tag penutup

Contoh penulisan tag HTML :

        <namatag>konten</namatag>

Elemen HTML 

Adalah semua yang ada di antara tag pembuka dan tag penutup.

tag pembuka	Element content	tag penutup
<p>	This is a paragraph	</p>
<a href="#">	This is a link	</a>
<body>	elemen isi body	</body>

Seperti contoh dokumen HTML diatas, terdiri dari 6 elemen HTML, yaitu :
elemen <html>, elemen <head>, elemen <title>, elemen <body>, elemen <h1>,elemen<p>

Elemen <head>

Tag <head> adalah wadah untuk semua elemen head.
Di dalam elemen <head> dapat mencakup script, menginstruksikan browser di mana untuk menemukan style sheet, memberikan informasi meta, dan banyak lagi.
Tag HTML yang dapat ditambahkan ke bagian kepala: <title>, <style>, <meta>, <link>, <script>, <noscript>, dan <base>.

Elemen <title>

Tag <title> mendefinisikan judul dokumen.

Elemen <title> diperlukan dalam semua dokumen HTML / XHTML .

Fungsi Elemen <title>:

• menampilkan judul website di toolbar browser
• memberikan judul halaman ketika ditambahkan ke favorit
• menampilkan judul  halaman di hasil mesin pencarian  (search engine result)

Elemen-elemen Head HTML 

Tag	Description
<head>	Mendefinisikan informasi tentang dokumen
<title>	Mendefinisikan judul dokumen
<base>	Mendefinisikan sebuah alamat default atau target default untuk semua link pada halaman
<link>	Mendefinisikan hubungan antara dokumen dan sumber/resource eksternal, umunya digunakan untuk link ke style sheet
<meta>	Mendefinisikan metadata tentang dokumen HTML (page description, keywords, author,robot,index, last modified, dan metadata yang lain)
<script>	Mendefinisikan  client-side script, seperti Javascript
<style>	Mendefinisikan informasi style untuk dokumen, menentukan bagaimana style ditampilkan di browser

* Untuk referensi lengkap HTML head elemen, kunjungi : www.w3schools.com/html/html_head.asp

HTML DASAR

HTML Heading (Judul)

HTML Heading ini dituliskan dengan kode tag <h1> sampai <h6>.

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>

HTML Paragraf

HTML Paragraf didefinisikan dengan tag <p>.

<p>Paragraf pertama.</p>
<p>Paragraf kedua.</p>

HTML Link

Link HTML didefinisikan dengan tag <a>.

<a href="http://problogiz.blogspot.com">Problogiz</a>

note: link address ditetapkan dalam atribut href ="..."

HTML Images

Gambar HTML didefinisikan dengan tag <img>.

<img src="banner problogiz.png" width="250" height="100">

note: nama file dan ukuran gambar disediakan sebagai atribut.

<!DOCTYPE> Declaration

<!DOCTYPE> declaration diperlukan browser untuk menampilkan halaman web (web page) dengan benar.
<!DOCTYPE> declaration harus diletakkan pertama dalam dokumen HTML Anda, sebelum tag <html>.
<!DOCTYPE> declaration : mendefinisikan jenis atau versi dokumen ( contoh diatas jenis deklarasi untuk HTML 5)

*Ada berbagai macam dokumen di web, dan browser hanya dapat menampilkan halaman HTML dengan benar 100%  jika ia tahu jenis dan versi HTML yang digunakan.

Beberapa contoh umum <DOCTYPE html!> declaration standard W3C, seperti :

HTML5 (HTML vesri Terbaru)

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

* Untuk referensi lengkap versi-versi <DOCTYPE html!>, kunjungi : www.w3schools.com/tags/tag_doctype.asp

Versi-versi HTML

Sejak awal diciptakan oleh seorang ilmuwan bernama Tim Berners-Lee pada tahun 1990. Sejarah HTML terus berkembang dengan berbagai macam versi dan kemajuan. Saat ini mulai diperkenalkan HTML versi terbaru HTML 5. Meskipun belum standar W3C namun, browser utama mendukung banyak elemen baru HTML5 dan API.  HTML5 kabarnya akan direkomendasikan oleh W3C pada tahun 2014 dan kandidat pengganti versi sebelumnya (XHTML 1.0 dan HTML 4.01)

Version	Year
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

source : w3schools.com