Merancang Masa Depan Dengan Keseriusan

Gambar Lah Masa Depan Anda Di Masa Yang Akan Datang Dan Buat Perubahan Derajat Anda

Dan Tatap Lah Masa Depan Anda

Tak Perlu Jauh Menatap Lagi Karna itu Hanya Hal Sia Sia Lebih baik Anda Tatap Masa Depan Anda

Membayang Kan Masa Depan Anda Sebentar Saja

Membayangkan Masa Depan Anda Walau Hanya Sebentar Saja sangat Berati Bagi Anda

Merancang Masa Depan Dengan Modal Yang Sedikit Bukan Halangan Untuk Menjadi Sukses

Saya Memulai Masa Depan Dengan Modal Yang Pas pas an Dan Itu Bukan Halangan Nya Tapi Keinginan yang Kuat Dan Keseriusan

BIla Itu Semua Anda Sangup Menjalani Nya Maka Anda Akan Sukses dan Menjadi Yang terbaik Dari Yang terbaik

Buat Kawan Semua jangan Terpegaruh Sama Kemajuan Zaman Sekarang Karna Zaman Sekarang Hanya Membuat Anda hancur

Masukan Nama Anda Dan Pasword apa Aja Untuk gabung chat

Minggu, 23 Desember 2012

Pengenalan Dreamweaver dan Layout

Seperti kata Pak Patah eh salah itu nama tetangga saya :) maksudnya Kata PEPATAH "Tak kenal maka tak sayang" oleh karena itu alangkah baiknya bila kita menilik apa itu Dreamweaver?
DREAMWEAVER (dulu milik dari macromedia namun sekarang menjadi milik dari Adobe) adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG — What You See Is What You Get — dalam bahasa sansekerta artinya ( Apa yang kamu lihat akan menjadi seperti apa yang kamu inginkan) masih bingung ya intinya Kita tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah situs karena sudah disiapkan secara instant seperti membuat Table, Membuat Hyperlink, Memasukkan Gambar, termasuk memasukkan Flash Animasi, dll. Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun juga dapat digunakan oleh programer untuk membangun halaman internaktif karena Dreamweaver mendukung pula PHP, ColdFusion, ASP.NET dan lain-lain. Mantab Bukan!!!

logo dreamweaver
Gambar 1 . Tampilan LogoDreamweaver


layout dreamweaver
Gambar 2 . Tampilan / Layout Dreamweaver


Berikut ini penjelasan untuk elemen-elemen workspace seperti telah tertera pada gambar.
- LEMBAR KERJA DREAMWEAVER adalah tempat di mana Anda dapat membuat halaman web secara visual, kode, atau keduanya.
- INSERT TOOLBAR adalah tempat Anda dapat memasukan image, Flash movie, table, atau elemen lain. Untuk memunculkan panel ini, klik Windows > Insert atau tekan Ctrl-F2.
- PENGATURAN HALAMAN berguna untuk melakukan pengeditan pada suatu elemen di Document Window.
- PANEL GROUP merupakan kumpulan dari panel-panel Dreamweaver.

Membuat Rollover Image

Dan seperti ini cara'a..
1. buka dreamweaver seperti biasa dan buat file baru berextensi html.. (anda bisa menggunakan tampilan Split maupun Code, tp saya terbiasa menggunakan tampilan code)
2. kita buat dulu bagian yang ingin dirollover gambar (backgroundnya) di antara tag <body></body> dengan menggunakan sebuah div tag dengan nama element menggunakan class atau id..
(di sini saya menggunakan element class)
berikut kode tag'a..

tampilan tersebut akan membuat sebuah link standar yang biasa digunakan tanpa ada style apapun..
dan berikut kode css yang ditaruh di antara tag <head></head>

#ffffff adalah bilangan hexadecimal untuk warna putih yang digunakan sebagai warna background..(saya menggunakan warna putih karena di halaman preview berlatarbelakang warna putih..)
* : cari dan isi gambar yang ingin digunakan untuk gambar awal dan gambar hover..
0 0 : merupakan posisi dari gambar backround 0 pertama adalah untuk posisi x dan 0 kedua adalah untuk posisi y..
no-repeat : merupakan perulangan dari gambar..no-repeat berarti tidak menggunakan perulangan..jika kalian ingin menggunakan perulangan..gunakan repeat-x untuk perulangan horizontal..dan repeat-y untuk perulangan vertical..
padding-left : memberikan jarak dari kiri untuk memperlihatkan gambar dari tulisan link yang ada..(saya menggunakan 20px karena lebar dari gambar adalah 15px..)
jika ingin menggunakan hover di setiap tag atau class atau id..cukup gunakan ":hover" setelah nama tag atau nama class atau nama id.. (tanpa kutip)

Cara Lainnya::
Bagi yang masih kebingungan dengan permainan Tag dan CSS jangan kuatir karena ada cara alternatif dalam menampilkan rollover image karena di dalam aplikasi dreamweaver telah disediakan :)
1. Buka aplikasi Dreamweaver
2. Pilih Insert >> Image Objects >> Rollover Image
tutorial dreamweaver

3. Maka akan muncul pop up yang harus anda lengkapi
tutorial dreamweaver
Penjelasan:
Image name: adalah nama / judul Rollover image anda (isi sesuka anda)
Original image: gambar utama/default Rollover image
Rollover image: gambar kedua (gambar yang akan muncul saat kursor disorot)
Arternate text : adalah penjelasan tentang gambar tersebut mengenai apa (boleh dikosongi/ boleh diisi sesuka anda)
When Clicked, Go to URL: isi dengan URL link yang anda inginkan, bisa web anda, paman google, atau web IG yaitu >> http://www.ilmugrafis.com :)
Nah setelah selesai Klik OK, mudah bukan,
sekarang coba buka halaman yang anda buat dengan browser anda (IE, Mozzila, Opera) whatever... yang penting minumnya teh sak kotaknya... wkwkwk :P
Just pudding
tutorial dreamweaver
Semoga Bermanfaat ^_^/

BELAJAR Membuat WEBSITE - Basic HTML

BELAJAR WEBSITE

Dewasa ini, hampir semua dokumen web dibuat dengan bahasa HTML (Hypertext Mark-up Language). Meskipun anda bisa saja membuat web page (halaman web) tanpa mengerti sedikitpun HTML, Sangat disarankan bahkan nyaris diharuskan, agar anda mengerti bahasa HTML. Untuk itu langkah pertama bagi Anda yang bercita-cita memiliki website sendiri adalah belajar HTML.

HTML (Hypertext Markup Language) adalah bahasa program yang digunakan untuk menulis format dokumen yang dapat digunakan dalam Web. Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file *.htm atau *.html). Oleh karena itu, untuk membuat dokumen HTML, anda bisa menggunakan semua program teks editor biasa, mulai dari Notepad hingga Dreamweaver. Untuk mudahnya, kita gunakan program Dreamweaver.

Apa yang dimkasud dengan file HTML?

-    HTML merupakan kependekan dari Hyper Text markup Language

-    Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup

-    Tag markup memberitahukan browser bagaimana harus menampilkan sebuah halaman

-    File HTML harus memiliki ekstensi htm atau html

-    File HTML dapat dibuat menggunakan editor teks yang biasa kamu pakai.
PENGENALAN KODE HTML
>>New >> Basic Page >> HTML , setelah itu atur ke mode Code
tutorial dreamweaver
disini anda akan menemui tag - tag semacam ini:
<HTML>
</HTML>
Penjelasan:
Masing-masing baris di atas disebut tag. Tag adalah kode yang digunakan untuk me-mark-up (memoles) teks ASCII menjadi file HTML. Setiap tag diapit dengan tanda kurung runcing. 
Ada tag pembuka yaitu <HTML> dan ada tag penutup yaitu </HTML> yang ditandai dengan tanda slash (garis miring) di depan awal tulisannya.
Tag di atas memberikan faidah bahwa yang akan ditulis diantara kedua tag tersebut adalah isi dari dokumen HTML. Perlu anda ketahui bahwa tag-tag html dapat ditulis dengan huruf besar ataupun huruf kecil. Artinya, penulisan <HTML> atau <html> atau <Html> sama saja hasilnya. Namun perlu selalu diingat bahwa penulisan tag yang salah meskipun hanya satu karakter akan berpengaruh terhadap dokumen HTML anda, bahkan bisa berakibat dokumen HTML anda tidak bisa ditampilkan dalam browser.

Sekarang kita akan beralih pada tag selanjutnya.
<HTML>
<BODY>
</BODY>
</HTML>
Isi dari dokumen HTML yang sesungguhnya adalah yang ditulis diantara tag <BODY>. Coba tuliskan:
<HTML>
<BODY>
Tulisan ini akan tampak dalam browser by ilmugrafis.
</BODY>
</HTML>
Sekarang simpanlah file ini dengan meng-klik menu File lalu Save. Nah, lihatlah hasil karya anda yang pertama dengan menekan F12 disitu akan muncul tulisan "Tulisan ini akan tampak dalam browser by ilmugrafis." tanpa tag HTML. Sekarang anda mungkin mulai mengerti cara kerja HTML dan markup tag, begitulah cara kerjanya, jadi yg muncul di broser hanya tulisan saja sedangkan tagnya hanya merupakan suatu perintah bagi browser untuk menampilkan perintah kita.

Apakah tag BODY fungsinya sekedar penanda tubuh atau isi dari dokumen web? Tidak, dalam tag BODY ini bisa kita sisipkan bermacam-macam atribut yang akan berpengaruh terhadap format atau tampilan halaman web secara keseluruhan. Pada kesempatan ini kita mengambil contoh bagaimana mengubah warna latar belakang dan warna tulisan dari halaman web dengan penambahan atribut ke dalam tag BODY.
<HTML>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser by ilmugrafis.
</BODY>
</HTML>
Simpanlah kembali file ini (klik File lalu Save). Untuk melihat bagaimana hasilnya tekan F12 atau klik tombol Refresh pada browser atau bisa juga dengan menekan tombol F5 pada keyboard. Dengan demikian, browser akan memanggil ulang file yang kini sudah mengalami perubahan. Maka akan tampaklah hasilnya:
tutorial dreamweaver
Perlu diketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis dalam format heksa contohnya seperti #rrggbb.

Ok setelah menguasai tag di atas maka kita lanjutkan ke inspeksi tag HEAD dan TITLE. Di sini terlihat bahwa kita mempunyai tag <HEAD> dan tag <TITLE>. Tag HEAD berfungsi untuk mengapit berbagai macam fungsi dan informasi yang berkenan dengan halaman web yang bersangkutan. Pada latihan kali ini, kita memasukkan tag TITLE diantara tag HEAD. Sesuai namanya, tag TITLE ini berfungsi untuk mengapit kalimat yang menjadi judul dari halaman web tersebut. Sekarang mari kita tuliskan judul halaman web ini:
<HTML>
<HEAD>
<TITLE>WEBSITE BUATANKU</TITLE>
</HEAD>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
Simpan lagi file ini dengan meng-klik File lalu Save. Sekarang kita akan melihat bagaimana perubahannya dalam browser. Lakukan lagi Refresh seperti di atas. Maka anda akan melihat di baris teratas (yang dinamakan Title Bar) dari program browser akan menampilkan judul atau titel dari halaman web anda yaitu: WEBSITE BUATANKU
previewnya kurang lebih seperti ini, disini saya menggunakan browser Firefox:
tutorial dreamweaver
Alhamdulillah, selesailah latihan pertama Belajar Membuat Website - HTML.
Selamat belajar HTML di Dreamweaver
Sampai ketemu lagi di Tutorial berikutnya
Semoga Bermanfaat ^_^/

Menu - Menu Animasi Menarik di Dreamweaver


1. Buka Program Dremaweaver anda, disini saya menggunakan Dremweaver 8 , namun cara ini bisa diterapkan untuk semua versi Dremweaver mulai dari MX , 8 hingga yang terbaru yaitu Adobe Dremweaver CS5
Start >> All Program >> Dreamweaver

2. kalau anda tidak / belum punya website untuk project anda bisa mengklik Create new: pilih HTML

3. Sebelum kita mulai membuat menunya maka kita diharuskan save (menyimpan) dulu project kita dengan menekan CTRL + S , pilih direktori / tempat penyimpanan lalu berikan nama file yang anda inginkan. klik Save

4. Setelah itu pilih menu Insert >> Media >> Flash Button
tutorial dreamweaver

5. Pilih template tombol menu animasi yang anda inginkan
tutorial dreamweaver
Disini ada berbagai macam tombol yang WOW, menarik bukan... sebagai contoh maka saya pilih saja salah satunya yaitu Glass-Silver
Button Text berfungsi untuk menambahkan judul / kata apa yang terdapat di dalam button nantinya
Font : jenis font yang dipakai
Size : ukuran font yang diinginakan
Link : tautan untuk menu nantinya

Tekan OK, untuk title isi saja
tutorial dreamweaver
OK

klo 1 menu kurang maka buat lagi sebanyak yang anda perlukan untuk menu di website anda dengan mengulangi langkah di atas
Contoh hasilnya:
tutorial dreamweaver
untuk mengetesnya tekan F12 untuk melihat hasilnya :)
Sampai ketemu lagi di Tutorial Dremweaver berikutnya
Semoga Bermanfaat ^_^/

Floating Back To Top Page


floating top
Pada Tutorial Dreamweaver dan HTML kali ini saya akan menjelaskan bagaimana cara membuat flating Back To Top Page kalau dalam bahasa Indonesianya adalah Tombol melayang untuk Kembali ke Halaman Atas. Maksudnya atas disini adalah kembali ke atas halaman. Misalnya kita mempunyai halaman posting yang panjang atau pengunjung loyal yang suka berkomentar di website atau blog anda dan sudah menscroll sampe bawah lalu kita ingin kembali ke menu utama yang ada di atas maka kita tidak perlu menscrol lagi ke atas jadi kita cukup mengKlik tombol back to top page saja. Jadi dengan shortCut ini maka kembali ke main menu menjadi Sangat praktis dan menghemat waktu dan tenaga tentunya.

Berikut ini cara dan Script Floating Back to Topnya:

1. Buka Dreamweaver, buka dan edit halaman web anda dengan Dreamweaver

2. Masukkan Script ini di antara tag <body> </body>
floating top
Sedikit penjelasan: tag "img scr" disini adalah untuk menload image yang kita inginkan
daripada mengetik IG sudah menyiapkan Script code floating top page

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top">
<img src="http://www.ilmugrafis.com/images/old-go-top.png" /></a>


Simpan (Save), upload file ke server


Tapi bagi anda pemakai blogger tidak perlu bersedih karena script di atas bisa juga dipakai di blogger. Caranya:

1. Login ke Blogger

2. Go to Layout -> Add a Gadget -> HTML/JavaScript type

3. Masukkan kode di atas, Save
Jika belum keluar di halaman utama konten blog anda maka Refresh Blogger anda dengan menekan tombol F5 di keyboard  

Membuat Server Lokal pada Laptop atau PC

Pada tutorial Website kali ini kita akan sedikit belajar tentang bagaimana cara membuat komputer atau laptop kita menjadi sebuah server (web server lokal atau dikenal dengan localhost). Server ini gunanya untuk menjalankan pemrograman PHP yang disertai DATABASE dan MySQL, JQUERY, maupun AJAX karena untuk menjalankan program - program scripting kita perlu menggunakan SERVER. Nah sebagai pemula maka kita terlebih dahulu belajar membuat website secara offline bukan? untuk itulah perlunya membuat server di PC atau Laptop kita sehingga kita bisa mengetes Program maupun Script yang telah kita buat.

Sebagai contoh, dalam keadaan OFFLINE web berformat *.Php dengan berformat *.Html. keduanya sama - sama bentuk extensi dari sebuah halaman website, namun ketika kita mengakses web dengan extensi php maka file web tersebut tidak akan terbuka pada browser kita. coba jika extensi tersebut adalah html (web statis) maka meskipun tanpa bantuan server, halaman web tersebut akan tetap bisa terbaca oleh browser kita.

Disini saya memberikan contoh file php dan contoh file html. bisa Didownload disini, agar tahu perbedaannya buka kedua file tersebut menggunakan browser anda (bisa firefox, chrome, internet explorer, safari, opera, dll)

Nah sekarang kembali ke cara membuatnya severnya (web server lokal atau localhost) bagaimana?
Ada beberapa jenis Software untuk Membangun Web Server lokal atau Localhost yang support Windows diantaranya adalah :

1. WampServer, Download di http://www.wampserver.com
2. XAMPP, Download di http://www.apachefriends.org/en/xampp-windows.html
3. AppServ, Download di http://www.appservnetwork.com
4. Php Triad, bisa dicari di Google Search atau http://sourceforge.net/projects/phptriad/

Software di atas merupakan gabungan dari php, mysql database dan apache. Semuanya memiliki fungsi dan kemampuan yang sama untuk membangun sebuah Webserver lokal pada Komputer PC maupun Laptop anda. Tidak perlu di instal semuanya, cukup pilih salah satu saja program dari 4 program yang saya contohkan di atas, disini saya menggunakan XAMPP. Program XAMPP merupakan sebuah paket instalasi untuk PHP, APACHE dan MySQL. Dengan menggunakan XAMPP, kita tidak perlu lagi repot menginstall ketiga software itu secara terpisah.

Bagaimana cara instalasinya? Seperti biasa tinggal download lalu instal seperti program windows pada umumnya.

Setelah selesai instalasi Langkah selanjutnya adalah menjalankan servicenya, maka Jalankan file xampp
Caranya:
1. klik kiri2x XAMPP Control Panel yang ada di desktop. Atau anda juga dapat menjalankan XAMPP Control Panel dari menu Start -> All Programs -> apachefriends -> xampp -> xampp control panel
xampp control panel
Tekan Start pada Apache dan MySql

2. Buka web browser anda, lalu ketikkan ---> http://localhost <lalu tekan enter>. Jika tampilannya seperti di bawah ini, maka apache sudah terinstall dengan benar
xampp
3. Dari tampilan yang muncul Anda dapat melakukan berbagai administrasi untuk server Anda termasuk membuat database SQL di Phpmyadmin, pilih English
xampp

4. Untuk menonaktifkan server lokal Anda, keluar dari XAMPP Control Panel. Caranya, pada XAMPP Control Panel, klik [Stop] pada masing-masing [Apache] dan [MySql], lalu tutup jendela kontrol panel (klik X pada pojok kanan atas)

5. Agar terbaca pada server maka kita harus meletakkan file - file php kita di document root milik XAMPP terletak pada folder
(jika anda menginstal di directory file C) maka C:\Program Files\apachefriends\xampp\htdocs\(folder web anda)\index.php

Pengenalan JQuery Website

Setelah menjamurnya konsep blogazine pada blog, jQuery sekarang telah menjadi bahan wajib bagi web desainer maupun blogger. Sebenarnya apa itu jQuery?
jQuery adalah library javascript, jQuery berisi kumpulan kode-kode/fungsi-fungsi yang siap pakai sehingga mempermudah dan mempercepat waktu kita dalam menuliskan kode javascript, karena kita hanya memanggil fungsi-fungsi yang kita butuhkan yang tentu saja sudah ada dalam jQuery tersebut, serta tidak perlu lagi menyusun kode javascript dari nol.Tentunya ini sesuai dengan slogan jQuery itu sendiri, yakni "Write less, do more".

Menurut pengalaman saya dan teman-teman lainnya, jQuery sangatlah ringan sehingga dengan menggunakan jQuery tidak akan membuat halaman web kita menjadi lambat untuk di load, dengan porsi yang tidak berlebihan, tentunya. Sebelum mempelajari jQuery, ada baiknya Anda sudah menguasai dasar-dasar HTML, CSS serta JavaScript. Untuk dapat menggunakan library ini, Anda dapat mendownload jQuery dari situs resminya yaitu www.jquery.com lalu menaruhnya pada direktori tempat Anda menyimpan file halaman web, dan jangan lupa pula untuk memanggil file jQuery di setap halaman web diantara tag <head></head> Anda dengan cara:
<script type="text/javascript" src="jquery.js"></script>

Tulisan yang berwarna merah menandakan nama file, nama file tersebut harus di sesuaikan dengan nama file jQuery yang telah kita download. Untuk lebih lanjut mengenai tutorial dasar desain web dengan jQuery akan dibahas pada tutorial berikutnya.
|==============|
Sintaks pada jQuery |
|==============|
Penting!
sama seperti PHP, untuk mempraktikkan tutorial ini anda harus mempunyai Localhost dengan cara mengubah komputer / laptop anda menjadi Server terlebih dahulu dan meletakkan file jquery di dalam localhost.

jQuery --sama seperti halnya library lainnya-- juga memiliki sintaks, biasanya sintaks yang dipakai adalah untuk memilih elemen-elemen HTML lalu melakukan suatu aksi terhadap elemen tersebut atau elemen lain. Ini mirip dengan gaya bahasa visual basic yang pada visual basic diistilahkan dengan konsep 'even driven' dimana suatu reaksi terjadi jika suatu aksi tertentu dilakukan.

Analoginya begini, misal: kita menuangkan sirup strawberry kedalam gelas yang berisi air putih, maka air putih tersebut akan berubah warna dari putih (bening) menjadi merah. Nah, Yang kita lakukan yakni menuangkan sirup adalah aksi, sedangkan peristiwa berubahnya warna pada gelas dinamakan reaksi.

Sintaks pada jQuery adalah sebagai berikut: $(selector).action()
Penjelasan!
$ biasa saya sebut dengan "cash", digunakan untuk mendefinisikan jQuery
selector) digunakan untuk menunjukkan elemen yang dipilih atau dituju
action() adalah aksi yang akan dilakukan terhadap elemen yang telah di seleksi atau dipilih.

agar lebih jelas saya beri contoh sebagai berikut:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Web Design | ilmugrafis.com</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
            $("button").click(function(){
            $("p").hide(1000);
            });
})
</script>

</head>
<body>
<p>Tulisan ini akan bereaksi</p>
<button>Klik tombol ini</button>
</body>
</html>
<script type="text/javascript" src="jquery.js"></script>

Penjelasan!
Seperti yang telah dijelaskan pada tutorial sebelumnya baris ini digunakan untuk memanggil file jquery.js.
$(document).ready(function(){
Ini dimaksudkan kode javascript yang ada pada baris dibawahnya berjalan pada saat halaman web di load.
$("button").click(function(){
$("p").hide(1000);
});
Baris diatas bermakna: ketika elemen “button” di klik oleh pengguna, maka elemen “p” (paragraph) disembunyikan dengan kecepatan selama 1000 mili detik.
Hasilnya:
floating top
kok cuma gambar, tenang karena ilmugrafisTeam telah menyiapkan Tester JQuery script di atas tersebut disini klik Test JQuery agar kalian bisa mengetahui maksud dari elemen “p” (paragraph) disembunyikan :)
Diberdayakan oleh Blogger.

Label 1

Label 3

Label 2

Label 7

Label 8

Random Template

Trending Template

Popular Template

Label 6

Label 5

Label 4

Translate