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.