Rancangan Konsep Web dengan Bentuk Sesuai Kebutuhan

Menerima Pemesanan Rancangan Web Untuk Personal ataupun Untuk Enterprise

Pelatihan dan Kursus Pembuatan Website

Membuka Pelatihan dan Kursus Pembuatan Website. Kursus Private ataupun Kelompok.

Pembuatan Website Sesuai Pesanan

Pembuatan Website Sesuai Pesanan. Website Untuk Pribadi ataupun Untuk Perusahaan.

Artikel dan Tutorial Ilmu Komputer

Kumpulan Artikel dan Tutorial Ilmu Komputer. Media Sharing Ilmu Pengetahuan.

Web Development dengan Bentuk Website yang Menarik

Merancang Website dengan Desain yang Menarik Sesuai dengan Pesanan

Sabtu, 22 Desember 2012

Cara Menggabungkan HTML dengan CSS

Sebenarnya ada tiga macam cara untuk menggabungkan antara file HTML dengan file CSS.
Berikut ini tiga cara untuk menggabungkan file HTML dengan CSS:

1. Inline Style

Inline style adalah cara penulisan file CSS secara langsung kedalam tag HTML, berikut ini contoh penulisan Inline Style :
  <html>
  <head>
  <title> Penggabungan File HTML dan CSS </title>
  </head>
  <body>
  <p>
  <h2 style="color : #FFCC00"> Contoh untuk inline style </h2>
  </p>
  </body>
  </html>

2. Embedded Style

Embedded style merupakan cara penulisan CSS kedalam file HTML perhalaman (page) dan penulisan file CSS sebelum .... tag </head>
Berikut ini contoh penulisannya:
  <html>
  <head>
  <title> Penggabungan File HTML dan CSS </title>
  <style type="text/css">
  h2{
  color:#FFCC00;
  background:#CC0000;
  }
  </style>
  </head>
  <body>
  <p>
  <h2> Contoh untuk Embedded Style </h2>
  </p>
  </h2>
  </body>
  </html>

3.  Link Style
Untuk penulisan link style merupakan penulisan secara terpisah antara file HTML dan file CSS dan kita tinggal memasang link saja, dan pemasangan link anda bisa taruh diantara <head>... </head>.
Untuk cara link style ini yang banyak digunakan oleh para Web Design atau programmer karena cara Link Style adalah cukup satu kali penulisan file CSS yang nantinya dipakai oleh seluruh halaman Website.
Biasanya para Web Designer menamai file Link Style CSS dengan nama style.css
Berikut ini contoh file nya:
  <html>
  <head>
  <title> Penggabungan File HTML dan CSS </title>
  <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
  <p>
  <h2> Contoh untuk link style </h2>
  </p>
  </body>
  </html>
File CSS biasanya disimpan dengan ekstensi .css atau dengan nama style.css.
  h2 {
  color : #FFCC00;
  background : #CC0000;
  }
Catatan :
  • Untuk menyimpan link ke file style.css penempatannya harus diantara <head>... </head>
  • Anda bisa membuat file.css lebih dari satu sesuai dengan kebutuhan
Baca Selengkapnya ..
Diposting oleh di Tidak ada komentar:

Jumat, 21 Desember 2012

Struktur dan Penulisan Program PHP

Struktur PHP dalam HTML

Kode-kode bahasa PHP dalam penulisannya menyatu dengan tag-tag HTML dalam satu file. Kode PHP diletakkan diantara tanda <? atau <?php dan diakhiri dengan tanda ?> sebagai identitas bahasa pemrograman PHP.
File yang mengandung kode PHP akan diberi ekstensi .php atau ekstensi lain yang ditetapkan oleh web server sebagai file PHP. Berdasarkan ekstensi ini, pada saat file diakses server akan mengenali file ini sebagai file PHP. Selanjutnya, server akan menterjemahkan kode-kode PHP menjadi tag-tag HTML pada browser client. Berikut ini contoh penulisan kode PHP yang menyatu dengan tag HTML:

   //latihan1.php
   <html>
   <head><title> Program PHP </title></head>
   <body>
   <?
      echo"Selamat datang di PHP..";
   ?>
   </body>
   </html>

Apabila anda menggunakan web server Appserv, ketik dan simpan program di atas kedalam direktori dokumen web C:\\AppServ\www dengan nama file latihan1.php. Untuk menjalankannya, buka browser anda dan ketik URL tujuan http://localhost/latihan1.php sehingga akan ditampilkan hasil seperti gambar berikut :


Komentar/Keterangan dalam PHP
Apabila dalam sebuah file PHP membutuhkan keterangan atau komentar dibagian kode, ada beberapa cara yang dapat digunakan untuk menyisipkan komentar tersebut, yaitu :
  1. Komentar diawali dengan tag /* dan diakhiri dengan tag */. Cara ini digunakan apabila jumlah komentar lebih dari satu baris.
  2. Komentar diawali dengan tag //. Tag ini hanya digunakan untuk komentar yang terdiri dari satu baris saja sehingga baris berikutnya harus diawali tag // kembali.
  3. Komentar diawali dengan tag #. Tag ini hanya untuk komentar yang terdiri dari satu baris saja.

Contoh penulisan komentar dalam program PHP :

    //latihan2.php
    <html>
    <head><title> Komentar dalam PHP </title></head>
    <body>
    <?
    //menciptakan tanggal saat ini
    $tanggal = date("d F Y");
    /* Mencetak tanggal pada browser. Jika yang ini, komentar dalam banyak baris, yang baru akan selesai setelah diakhiri dengan */
   echo " $tanggal ";
   # atau ini juga bentuk lain penulisan komentar/keterangan
   echo "$tanggal ";
  ?>
  </body>
  </html>
Baca Selengkapnya ..
Diposting oleh di 1 komentar:

Minggu, 09 Desember 2012

Aturan Penulisan CSS

Dalam penulisan CSS ada aturan yang digunakan, pada CSS ada komponen utama dalam penulisannya yaitu Selector dan Declarator.
Perhatikan contoh dasar penulisan CSS di bawah ini :

Selector { Declarator };

Selector merupakan tag dari penulisan HTML semisal h1, h2, p, b dan lain-lain.
Deklarator adalah yang memerintahkan browser untuk membuat tampilan pada selector sesuai dengan perintah yang ada pada declarator.
Sedangkan declarator terdiri dari property dan value.

Contoh kecil :

Biasanya pada penulisan artikel banyak digunakan tag <p> atau paragraf, jika anda ingin merubah penulisan font dari artikel anda pada paragraf, pada CSS penulisannya adalah sebagai berikut:

p { font-family : Arial };

Tag <p> merupakan selector daro paragraf dan yang berada dalam kurung kurawal adalah declaratornya yang memerintahkan browser untuk menampilkan artikel paragraf dengan font Arial. Sedangkan font-family adalah property dan Arial adalah value nya.

Detail rumusnya sebagai berikut :

Selector { property : value };

Rumus di atas merupakan kunci anda untuk meguasai CSS, dan terus anda ingat sebenarnya CSS itu sangat sederhana sekali dan sangat simple.

Selector ID dan Selector Class
Selain selector yang bisa ditulis secara langsung dengan menghilangkan tanda <...>, semisal <p> cukup anda tulis p saja, dan selector lain yang tidak kalah pentingnya yaitu selector ID dan selector Class.
Coba anda bayangkan jika anda mau merubah tampilan tag <p> dan tampilannya berlainan semisal untuk font, anda bisa menentukan tag <p> di CSS tetapi jika pada penulisannya p{font-family:arial} maka semua tag <p> akan dirubah menjadi font Arial semua.
Bagaimana jika salah satu pada tag <p> anda menginginkan font nya dirubah menjadi Verdana, untuk itu anda membutuhkan selector ID dan selector Class.

Selector ID

Fungsi dari selector ID adalah untuk memberi tanda supaya pada tag HTML yang sudah diberi id bisa diberi format lain.

Sebagai contoh :

Penulisan pada tag HTML
<p id="test"> disini anda menulis artikel </p>
<p> Tulisan artikel anda yang lain </p>

Disini anda memberi selector ID dengan nama test, dan pada halaman CSS anda bisa memberi kode sebagai berikut:

p{font-family:verdana};
#test{font-family:arial};

pada selector ID penulisan ID ditandai dengan tanda "#".
yang berarti artikel pada tag p yang sudah diberi ID akan dibaca font menajdi Arial, sedangkan tag p yang lain dibaca menggunakan font Verdana.
 

Selector Class

Untuk selector class fungsinya sama dengan selector id, namun pada selector class anda bisa memberi lebih dari satu selector class, tetapi pada selector id anda tidak bisa memberi nama id yang sama.

Contoh penulisan selector class :

Pada tag HTML:
<p class="media"> Artikel anda disini </p>

Pada CSS :
.media {font-famili:calibri};

Pada selector Class penulisan Class ditandai menggunakan tanda " . "

Kesimpulannya adalah :
Pada kedua selector ini fungsinya sama, namun yang membedakan adalah pada selector ID anda tidak bisa membuat lebih dari satu dengan kata lain selector ID digunakan untuk yang spesifik.
Sedangkan selector class, anda bisa menaruh selector Class pada tag HTML lebih sari satu, namun semua itu nantinya tergantung akan kebutuhan anda.


Baca Selengkapnya ..
Diposting oleh di Tidak ada komentar:

Sabtu, 08 Desember 2012

Pengenalan CSS

Apa itu CSS (Cascading Style Sheet)?
Sebelum anda melangkah jauh, penting untuk mengetahui istilah Style Sheet terlebih dahulu. Style sheet adalah text sederhana dengan eksitensi (.css) yang ditulis menurut aturan bahasa pemrograman yang merujuk rekomendasi dari W3C (World Wide Web Consortium)/www.w3.org, yang merupakan badan gabungan dari pemilik web, universitas, perusahaan (seperti : Microsoft, Nestcape, Aple, Opera, Mozilla dan Macromedia) tak luput juga para ahli dalam bidang web.
W3C dapat dikatakan sebagai acuan atau pedoman dalam menentukan teknologi paling mutakhir pada web, tujuannya adalah untuk mengurangi kekacauan kode pada sebuah web serta mempermudah akses web oleh user dari berbagai macam browser.
Rekomendasi yang dikeluarkan W3C merupakan standardisasi dari pengembang web, web desain  dan programming web.
Jika web yang sudah menggunakan kode yang sudah sesuai standarisasi W3C, maka web tersebut akan mudah diakses oleh berbagai macam browser.
Bila anda sudah mempunyai website alangkah baiknya anda memvalidasinya pada W3C apakah sudah memenuhi standar dari W3C, untuk alamatnya silahkan buka link : www.jigsaw.w3.org/css-validator.

Apa yang menjadi keuntungan menggunakan CSS

Pernah salah seorang siswa saya bertanya kepada saya,

"Pak, dengan HTML kan kita sudah bisa membuat website !, mengapa koq saya perlu belajar CSS pula, toh bahasanya kan hampir sama dengan HTML ?".

Saya balik bertanya:

"Itu jika kamu membuat web hanya beberapa halaman saja, coba jika kamu membuat web dengan banyak halaman, apakah kamu selalu membuat setting satu persatu pada halaman web?".

Memang, anda bisa membuat suatu web hanya dengan mengandalkan kode HTML saja tanpa menggunakan CSS, tapi apakah anda sanggup untuk membuat ratusan bahkan ribuan halaman website hanya dengan HTML saja ?, tentu jawabannya tidak !, belum ditambah jika ada masalah dalam pengaksesan oleh user yang menggunakan browser yang berbeda.

Salah satu keuntungan dari menggunakan CSS adalah anda bisa membuat ratusan bahkan ribuan halaman website hanya dengan satu kali penulisan bahasa CSS.

Anda cukup menggunakan satu setting saja pada seluruh halaman website anda.
Sebagai contoh : Anda akan membuat Heading 1 (h1) pada halaman web anda dengan Font Arial dan berwarna Merah, jika tanpa menggunakan CSS anda harus menulis satu persatu halaman web anda yang ada Heading 1, tetapi jika menggunakan CSS, anda cukup satu kali saja membuat penulisan, dan selanjutnya anda hanya tinggal menulis artikel nya saja.
Keuntungan lainnya dalam menggunakan CSS adalah karena CSS sudah menjadi elemen penting dalam pembuatan web yang sesuai dengan teknologi web 2.0 atau web modern yang sudah menjadi tren saat ini dan beberapa tahun yang akan datang.
Memang dengan CSS adalah solusi tepat dalam membuat suatu website.

Fungsi HTML dan CSS pada halaman Web

Menurut rekomendasi dari W3C, untuk pembuatan suatu website, untuk menjadi kerangka dari web tersebut anda perlu menggunakan HTML dan untuk desain dari website anda dituntut untuk menggunakan CSS.

Sebagai contoh :

Jika anda akan membuat suatu artikel web dengan align center, maka pada penulisan HTML anda tidak dianjurkan untuk membuat tag "align" tetapi cukup hanya menulis artikelnya saja dan untuk membuat supaya artikel tersebut sesuai dengan desain, maka anda menggunakan CSS.

Kesimpulannya adalah :

HTML untuk membangun dasar kerangka dan penulisan artikel saja . Dan CSS berfungsi untuk mendesain halaman website.
Baca Selengkapnya ..
Diposting oleh di Tidak ada komentar:

Jumat, 07 Desember 2012

Instalasi PHP, MySQL dan Apache dengan AppServ

Pada bagian ini akan dijelaskan bagaimana kita dapat menjalankan PHP, MySQL dan Apache secara bersamaan. Ada dua opsi sebenarnya, pertama kita dapat menginstall ketiga aplikasi tersebut satu persatu, dan mengkonfigurasikan satu persatu aplikasi-aplikasi tersebut sampai semuanya terintegrasi, dan opsi yang kedua adalah, saat ini telah banyak web server paketan yang di dalamnya telah berisi PHP, MySQL dan Apache, dan yang lebih mengasyikkan lagi, paket ini gratis.
Kita langsung saja kepada praktik dalam meng-instalasi AppServ, sebuah paket yang berisi PHP, MySQL dan Apache secara lengkap. AppServ sendiri bisa langsung kita download di http://www.AppServNetwork.com dan download AppServ versi terbaru.

Langkah 1
Double klik AppServ yang sudah kita download, contoh disini adalah AppServ-win32-2.5.9.exe


Langkah 2
Setelah kita double klik AppServ-win32-2.5.9.exe maka akan muncul tampilan di bawah ini. Klik Next saja.


Langkah 3
Ini merupakan default folder dimana kita akan meng-install AppServ-win32-2.5.9.exe, saya sarankan biarkan saja menggunakan folder default-nya, tidak perlu dirubah, yaitu folder C:\AppServ. Klik Next.


Langkah 4
Pada tahap berikutnya adalah akan ditampilkan model-model peng-instalan. Pilih Typical, kemudian klik Next.

Langkah 5
Berikutnya akan ditampilkan isian server name. Biarkan saja server name nya dengan localhost, dan port nya 80. Klik Next
Langkah 6
Pilihlah username dan password untuk mengakses database MySQL. Isikan sesuka anda, contoh isikan username=root dan password=root. Kemudian klik Next, selesailah sudah. Anda sudah berhasil menginstall PHP pada komputer anda.


Sekarang buka browser anda (Mozilla Firefox atau Internet Explorer), dan ketikkan "localhost" (tanpa tanda petik) pada address bar, maka browser anda akan menampilkan tampilan seperti ini :



Selamat, PHP sudah terinstall pada komputer anda. Selamat mencoba kawan.. :)
Baca Selengkapnya ..
Diposting oleh di Tidak ada komentar:

Selasa, 04 Desember 2012

Pengenalan PHP

PHP merupakan singkatan dari (PHP:Hypertext Preprocessor), adalah bahasa pemrograman Open Source yang dikhususkan untuk pengembangan web dan bisa disisipkan pada HTML. Tujuan utama dari bahasa PHP ini diperuntukkan bagi para programmer dalam membuat halaman web yang dinamis dan cepat. Selain itu masih banyak lagi yang dapat dilakukan dengan PHP.
PHP pertama kali ditemukan pada tahun 1995 oleh seorang software developer bernama Rasmus Lerdorf. Ide awal PHP adalah ketika itu Rasmus ingin mengetahui jumlah pengunjung yang membaca resume online pada homepage-nya.
Rasmus Lerdorf benar-benar menjadikan PHP sangat populer, dan banyak sekali team developer yang ikut begabung dengan Lerdorf untuk mengembagkan PHP hingga menjadi sekarang, hingga akhirnya dirilis versi ke-3 nya pada Juni 1998, dan tercatat telah lebih dari 50.000 programmer menggunakan PHP dalam membuat website dinamis. Pengembangan demi pengembangan terus berlanjut, ratusan fungsi ditambahkan sebagai fitur dari bahasa PHP, dan di awal tahun 1999, netcraft mencatat ditemukan 1.000.000 situs di dunia telah menggunakan PHP.
Ini membuktikan bahwa PHP merupakan bahasa yang paling populer digunakan oleh dunia web development. Hal ini mengagetkan para developernya termasuk Rasmus sendiri, dan tentunya sangat di luar dugaan sang pembuatnya. Kemudian Zeev Suraski dan Andi Gutsman selaku core developer (programmer inti) mencoba untuk menulis ulang PHP Parser, dan diintegrasikan dengan menggunakan Zend scripting engine, dan mengubah jalan alur operasi PHP. Dan semua fitur baru tersebut dirilis dalam PHP4.
Yang menjadikan PHP berbeda dengan HTML adalah proses dari PHP itu sendiri. HTML merupakan bahasa statis yang apabila kita ingin merubah konten/isinya maka yang harus dilakukan pertama kali nya adalah, membuka file-nya terlebih dahulu, kemudian menambahkan isi kedalam file tersebut. Beda hal nya dengan PHP. Bagi anda yang pernah menggunakan CMS seperti wordpress atau joomla yang dibangun dengan PHP tentunya, ketika akan menambahkan konten kedalam website, anda tinggal masuk kedalam halaman admin, kemudian pilih new artikel untuk membuat halaman/content baru. Artinya hal ini, seorang user tidak berhubungan langsung dengan scriptnya. Sehingga seorang pemula sekalipun dapat menggunakan aplikasi seperti itu.
Baca Selengkapnya ..
Diposting oleh di Tidak ada komentar:
Langganan: Komentar (Atom)