Tuesday, December 22, 2009

Mengenal Dasar CSS (part.1)

Setelah sebelumnya saya sudah post artikel Mengenal CSS, maka kali ini saya akan menulis tentang dasar-dasar mempelajari CSS. Dapat di tarik kesimpulan bahwa CSS itu adalah cara memformat halaman website yang dibangun dengan xHTML dengan cepat, melalui properti-properti yang di set (format) di CSS kita bisa menghemat waktu dalam pembuatan atau pengelolaan sebuah halama website.berarti kita akan menghemat waktu,tenaga & berarti juga menghemat uang.

Dalam mempelajari CSS ada beberapa hal yang harusnya sudah kita kuasai, antara lain:
-pertama yang pasti bisa menggunakan Browser (Mozzila Firefox, Opera, IE, ataupun lainnya)
-bisa atau mengerti menggunakan webserver local (XAMPP, WAMP, atau lainnya)
-bisa atau mengerti xHTML
-terakhir bisa atau mengerti menggunakan teks editor (Notepad, notepad++, HTMLeditor dll)

jika kita merasa sudah memenuhi syarat di atas, selanjutnya adalah mengenal lebih dekat tentang CSS. setahu penulis CSS dapat di pasang atau di tempatkan pada code halaman xHTML dengan tiga cara yaitu :
1. Inline
2. Embedded (tempel)
3. Exsternal

Penulisan kode dengan cara inline adalah dengan langsung menyisipkan kode (style CSS) pada baris kode atau tag  xHTML yang ingin deberikan style (properti),misalnya :
......
<body>
  <h1 style=“color:blue”>CSS inline test doang </h1>
.......

Penulisan kode dengan cara embeded adalah dengan menyisipkan kode diatara tag <head>...</head> dengan maksud memformat halaman secara keseluruhan (hanya terbatas pada halaman yang di embedded),contoh penulisannya seperti berikut :

<html>
<head><title>Contoh css embedded</title>
<style type="text/css">
  hr {color: red}
  p {margin-left: 20px}
  body {background-image: url("images/back40.gif")}
  </style>
</head>
......

Cara yang ketiga adalah dengan cara file external, maksudnya adalah kita membuat sendiri file .css dan di simpan dengan terpisah degan file html. kalau file nya terpisah,terus bagaimana halaman bisa terformat??
seringkali pertanyaan seperti itu muncul, padahal jawabannya sangat mudah,yaitu kita hanya perlu memberikan link (ditulis di antara tag <head>...nama file ***.css</head>), kalau masih bingung bisa lihat contoh berikut :

kode ini di simpan dengan akhiran .htm
<html>
<head>
<title>contoh css external</title>
<link rel="stylesheet" href="mystyle.css“ type="text/css" media="screen" />

  <style type="text/css" media="screen">
  /* <![CDATA[ */ @import url(mystyle.css); /* ]]> */
  </style>
</head>
<body>
  <h1>Belajar Cascading Style Sheet</h1>
  <h2>Pengertian</h2>
  <p>CSS kependekan dari Cascading Style Sheet.</p>
  <p>CSS merupakan fitur tambahan untuk (X)HTML untuk mengatur format tampilan</p>
  <p>Dengan menggunakan CSS, waktu pengembangan halaman web dapat dipercepat.</p>
  <h2>Cara Penulisan CSS</h2>
  <p>CSS dapat ditulis dengan tiga cara yaitu :
  <ul>
  <li>Inline</li>
  <li>Embed</li>
  <li>File eksternal</li>
  </ul>
  </p>
</body>
</html>

kalau yang berikut di simpan dengan akhiran .css (misalnya mystyle.css)

body { background-color:blue ;}
h1 {font-family :times new romans;font-weight:bold; color:yellow;}
h2 {color:lime; text-decoration:blink;}
p {margin-left: 20px;}
li {text-decoration:underline;font-color:lime;}

Sampai disini berarti anda sudah bisa menggunakan css sederhana melalui 3 cara yaitu inline,Embedded dan file eksternal, untuk kelanjutan dasar-dasar css lainnya akan saya post di blog ini lagi secepatnya. mohon ma'af kalau bahasa saya kurang atau susah di mengerti (namanya juga pemula).

Wassalam













Wednesday, December 16, 2009

Apa itu CSS (Cascade Style Sheet)

CSS pasti udah sangat umum di kenal oleh para master web, tapi buat para pemula seperti penulis, CSS masih hanya sekedar imajinasi yang sering di dengar tapi cuma sekedar angin lalu saja.. maksud hati ingin meraih suara itu namun masih bingung memulai dari mana,pada artikel kali ini penulis ingin membagi sedikit pengetahuan tentang CSS,mungkin akan sangat panjang tulisan tentang CSS,jadi penulis mohon ma'af apabila belum sempat menuliskan semua yang penulis tahu.

Sebenarnya CSS itu sangat penting dan sangat berguna dalam hal blogging ataupun membangun sebuah halaman website, khususnya web page yang di bangun dengan kode HTML, karena sepengetahuan penulis, CSS dan HTML bagai 2 sisi mata uang (ckckckc..!!??).., kok bisa ? jawabannya adalah bisa!!!

Kalau di ilustrasikan yang penulis anggap paling mudah adalah,jika HTML itu seorang wanita,maka CSS adalah Make Up (alat-alat kecantikan)nya, kenapa? karena pada dasarnya HTML itu di gunakan lebih kepada dasar atau kerangka dari sebuah halaman website, dan CSS adalah aksories untuk membuat kerangka tadi menjadi lebih rapi & cantik...

Oleh karena itu jika kita para pemula yang masih baru di dunia web desain wajib menguasai yang namanya Cascade Style sheet tersebut.., untuk lebih jelasnya tentang dasar-dasar dan contoh penggunaan CSS akan penulis tulis di lain kesempatan.. masih di blog ini yang memang masih pemula.

Wassallam

Thursday, December 3, 2009




Kemarin saat penulis melakukan kewajiban sebagai seorang surveyor di salah satu masjid di daerah kemayoran, penulis tanpa di sadari masuk di salah satu ruangan yang menyimpan gambar diatas, saat itu pula teringat akan semuanya.. huhh.. sungguh diri ini penuh salah...

Tuesday, December 1, 2009

Membuat Table dengan HTML

Tabel dalam membuat sebuah halaman website sangat berguna, karena kita bisa mengatur posisi isi dari halaman yang akan kita buat.Langsung saja saya akan berikan gambaran singkat untuk membuat tabel dengan 2 baris dan 2 kolom, berikut contoh kodenya:
<html>
<head>
<title>membuat tabel sederhana</title>
</head>
<body border=1>
<table>
<tr>
<td>baris 1 kolom 1</td><td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 1</td><td>baris 2 kolom 2</td>
</tr>
</table>
</body>
</html>

jangan lupa kode diatas di save dengan akhiran ".htm" atau ".html" nisalnya coba1.htm, jika sudah kita bisa lihat hasilnya dengan dobel klik pada file yang sudah kita simpan tadi. hasilnya akan seperti berikut :



*note : pada tag <table border=1>, border=1 merupakan atribut dari tag table, yang menjelaskan bahwa ketebalan garis (bingkai) sama dengan 1.
penjelasan tentang atribut dalam HTML akan saya jelaskan pada artikel lainnya.

Monday, November 30, 2009

Menampilkan statistik blog gratisan

Setelah mondar mandir di pekarangannya google, mencari widget buat menampilakan statistik blog, akhirnya saya memutuskan untuk memilih histats, soalnya lumayan gampang alias mudah alias nggak ribet.
kita cuma masuk ke histats.com, terus masukkan alamat URL blog kita di kolom isian seperti gambar berikut :



lalu klik register,dan selanjutnya kita akan di hadapkan pada halaman seperti berikut :



Isikan semua yang diminta, lalu lanjutkan dengan klik continue.
dan Setelah itu akan muncul halaman untuk memilih kategori widget yang ingin ditampilkan. Tentukan pilihan klik tombolnya :



lalu kita akan di hadapkan pada halaman untuk menentukan bentuk tampilan widget yang ingin ditampilkan. Pilihlah, lalu klik tombol Continue.



Selanjutnya adalah menentukan informasi yang ingin kita ditampilkan di widget. Setelah selesai menentukan data-data yang ingin ditampilkan, lalu klik tombol Continue. pada tahap ini server hitstats "meng_generate kode script untuk kita embeded (tempelkan) di widget kita.



Setelah itu akan keluar halaman untuk mendapatkan kode widget yang kita inginkan. Kopi kode tersebut.




lalu masuk (login) ke Blogspot --> Tata Letak (layout) --> Elemen Halaman, lalu klik link Tambah gadget (add gadget) di lokasi yang kita inginkan-->pilih HTML/JavaScript Gadget dan masukan kode yang tadi didapat dari Histats.com, lalu klik tombol simpan.

Sekarang blog kita telah memiliki widget akan untuk menampilkan data statistik blog (total jumlah page view dan pengunjung, sesuai parameter yang kita isikan)
dan jangan lupa untuk mengaktifkan akun histats yang sudah kita daftar, lihat /cek email yang masuk ke alamat email kita.