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.
 




Tag-Tag dalam HTML

Pada artikel sebelumnya kita sudah mengenal kerangka dari halaman website sederhana menggunakan tag HTML,yang terdiri dari
<html>  
<head>
<title>isi judul disini</title>
</head>
<body>
disini memasukkan isi dari halaman web
</body>
</html>

dalam membangun sebuah halaman website (HTML page),  kita diharuskan mengenal tag-tag yang berlaku dan sudah menjadi standard. berikut adalah tag-tag dasar yang sering bahkan pasti digunakan dalam pengembangan/perancangan sebuah halaman website :

<h>...</h>   untuk menerangkan Judul (header)
<p>...</p>  untuk membuat paragraf
<br>           untuk berganti baris
<!-- ...-->   untuk memberi keterangan dalam penulisan kode,"kode ini tidak di eksekusi"
<hr>           untuk membuat garis horisontal atau mendatar
<b>...</b>  untuk memformat huruf atau teks menjadi tebal (bold)
<em>..</em> untuk penekanan
<i>...</i>       untuk memformat teks menjadi teks miring 9(italic)
<strong>..</strong> untuk penguatan
<sub>...</sub> subscript
<sup>...</sup> superscript
<ins>...</ins>  untuk menyisipkan (insert)
<del>..</del>  untuk menghapus
<s>...</s>       untuk memberi efek coret pada teks (strikeout)
<strike>..</strikeout> strikeout
<u>...</u>      untuk memberi garis bawah pada teks (underline)
<pre>..</pre> untuk preformatted

mungkin masih banyak lagi tag-tag pada html, berhubung penulis juga masih junior ya.. segitu saja yang penulis bisa sampaikan. jika om, tante, brother, atau siapapun ada saran,kritik,masukan atau bahkan cacian. mohon beri komentar pada tulisan saya ini.

Thursday, November 26, 2009

Mengenal HTML

Pertama-tama saya infokan kepada para pembaca, bahwa tulisan ini hanya untuk pemula yang benar-benar pemula, bagi anda yang sudah expert mohon bimbingannya saja.. karena penulis hanya seorang yang masih sangat newbie.
Anda pasti sudah sering mendengar HTML, yang sering kita dengar adalah html merupakan bahasa pemrograman untuk website, padahal HTML atau&nbsp; Hyper text Markup Language adalah salah satu bahasa untuk mengatur tampilan atau format tampilan pada halaman website, dan bukan bahasa pemrograman. kalau bahasa pemrograman contohnya seperti bahasa PASCAL, C, C++, JAVA dan lainnya.
Dalam perkembangannya HTML berkembang pesat seiring makin luasnya penggunaan internet di dunia ini, walaupun saat ini sudah banyak aplikasi-aplikasi untuk mendesain halaman website, seperti Macromedia Dreamweaver (Adobe Dreamweaver),flash, atau java script, dan lainnya, tetapi sejatinya para desainer harus mengerti tentang HTML.

Html terdiri dari tag pembuka "<nama tag>" , dan tag penutup "</nama tag>",yang merupakan standar baku penulisan kode untuk membangun halaman website.aturan penulisannya harus saling berpasangan, ilustrasinya kalau ada pintu masuk pasti ada pintu keluar, ada buka ada tutup, misalnya tag "<head>" harus di akhiri dengan tag "</head>".namun ada sebagian yang tidak memerlukan tag penutup seperti tag "<br>" untuk berganti baris, atau tag "<img>" untuk menyisipkan (embeded) gambar.

oke, untuk contoh awal, anda bisa ikuti langkah berikut:
Buka text editor di komputer anda (saat ini penulis menggunakan Notepad) pasti anda tahu kan caranya, tapi gak ada salahnya saya ulas caranya "klik star menu-accessories-notepad".
lalu tulis kode seperti dibawah ini:

<html>
<head>
<title>belajar1</title>
</head>
<body>
      ini adalah halaman website saya yang pertama
</body>
</html>

setelah selesai simpan kode tadi dengan akhiran (extension) .html atau .htm.
dari kode di atas akan di dapat hasil seperti gambar berikut:



Oke, jadilah halaman website yang sederhana.
Penjelasan dari kode diatas adalah :
baris pertama tag "<html>" adalah tag pembuka halaman, setiap halaman web HTML pasti menggunakan tag ini.
tag ke dua adalah tag "<head>" merupakan kepala dari halaman website yang kita buat, di dalam tag ini bisa kita insert (sisipkan) tag "<title>" ......judul halaman... </title>,atau kita bisa sisipkan tag <style> ...berisi parameter CSS (cascading style sheet),untuk menambahkan aksesoris menggunakan CSS (Cascading Style Sheet), yang mudah-mudahan bisa penulis bahas di artikel lainnya di lain waktu.

lalu tag Selanjutnya adalah tag  <body>, sesuai dengan namanya tag ini berfungsi menampung isi dari halaman yang kita buat, misalnya teks,gambar, grafik, tabel dan lainnya.

sekian dulu artikel tentang html kali ini, penulis mohon ma'af kalau gak sesuai harapan pembaca, karena penulispun masih pemula juga.

Thursday, November 12, 2009

Daftar Di Blogger.com

Berhubung blog ini dibuat untuk pemula belajar blogging, dan saya pun masih pemula juga di blogging, sambil saya menyimpan artikel ini untuk pribadi apa salahnya juga klo saya sharing sama anda semua yang baru mau memulai blogging,..sedikit akan saya terangkan bagaimana cara membuat blog di www.blogspot.com. oke berikut langkah-langkah yang harus kita lakukan: 



Awal daftar anda di haruskan masuk ke blogger menggunakan akun google yang sudah di buat di www.gmail.com, Masukan nama email & password di kolom pojok kanan atas lalu tekan atau klik masuk (sign in).


Sekarang anda sudah di halaman dashboard di pojok kiri atas ada frofile anda, jika ingin merubah nya anda tinggal klik saja di bagian mana anda akan merubahnya.Di kolom tengah adalah kolom manage blog, disini akan terlihat kosong karena saat ini anda baru akan membuat blog.


Oke, masih di halaman dashboard, klik create a blog untuk membuat blog baru,


Sekarang anda di halaman 2 (name your blog) terdiri dari :
Blog title = judul blog anda, misal:hobi blog instan

Blog address = alamat situs blog anda, misal:www.ikanhiu.blogspot.com (dengan catatan anda harus memilih alamat blog yang belum ada di blogspot,untuk mencari tahu apakah nama yang anda akan daftarkan sudah ada atau belum, anda tinggal klik link check availability di bawah nya.
Word verification = huruf atau angka yang harus anda ketik di kolom yang di sediakan, mengacu pada gambar di atas kolom tersebut.
Continue = klik tombol ini jika sudah selesai

Sekarang anda sudah berada di halaman untuk memilih template desain layout blog anda.Di sini disediakan beberapa template standar blogger yang bisa anda pilih, lalu klik continue“jika anda kurang sreg sama template yang sudah anda pilih, anda bisa menggantinya dengan template lain di kemudian hari”


Selesai.. Anda sekarang sudah memiliki blog pribadi

Semoga tulisan ini dapat membantu, untuk tutorial lainnya akan saya posting lain kali masih di blog ini.