November 2012

Tutorial CSS : Form Cantik Dengan CSS

di tulis oleh: Ivan Silalahi

" BANTU SUBSCRIBE CHANNEL YOUTUBE SAYA, AGAR SAYA MEMBUAT VIDEO TUTORIAL SETIAP POSTINGAN BLOG INI DAN MASIH BANYAK LAGI YANG BISA SAYA BAGIKAN UNTUK SOBAT-SOBAT SEKALIAN. TERIMAKASIH SEBELUMNYA "

Beautifull Form dr.emi with CSS web desain grafis

Hai sahabat setia blog ini, kali ini saya akan membagikan tutorial css untuk membuat form website kita terlihat cantik dan elegant. dalam hal ini saya mengasumsikan bahwa anda-anda sebelumnya sudah tahu atau minimal sudah pernah mendengar apa itu css. Hampir seluruh website sekarang ini sudah menggunakan CSS untuk mempercantik tampilan website mereka. Apa sih keunggulan CSS ?? pasti anda bertanya demikian ,

Keunggulan CSS adalah dengan css tampilan website kita menjadi indah simpel dan enak dipandang mata, dan yang paling utama adalah website kita tidak akan berat. berat berarti saat dibuka dalam jendela browser, loadingnya tidak akan terlalu lama atau sangat ringan.

Berikut Code CSS nya yang telah dipadukan dengan HTML :

#formM { margin:0px;padding-left:20px;padding-bottom:20px;}
#formM h1 { padding-left:72px;padding-top:10px; font-size:18px;padding-bottom:10px; color:#990000; }
#formM p { padding-left:72px;padding-top:10px; font-size:11px;padding-bottom:10px; }
#formM .inputM{
border:1px solid #C0C0C0;
color:#666666;
background:url(beautifull-form.gif) 0 0 repeat-x; /*support IE, FF*/
height:26px;
font-size:16px;
}
#formM .textareaM{
border:1px solid #C0C0C0;
color:#666666;
font-size:16px;
}
#formM label{
display:block;
margin-bottom:10px;
color:#666666;
}

#formM label span{
display:block;
float:left;
padding-right:6px;
width:70px;
text-align:right;
font-weight:bold;
font-size:16px;
}
#formM .spacer{margin-left:80px;
margin-bottom:10px;
font-size:11px;
color:#555555;
}
#formM .buttonM{
background:url(coklat.gif) 0 0 no-repeat;
border:1px solid #3b6e22;
height:26px; width:100px;
color:#FFFFFF;
font-size:14px;
text-decoration:none;
font-weight:bold;
}
.spacerA { clear:both; height:20px; margin:0px; padding:0px; }
–>
</style>

Sekarang mari kita buat formnya berdasarkan style css diatas:

<div id=”formM”>
<h1>Kumpulan Tutorial Website </h1>
<form id=”form1″ name=”form1″ method=”post” action=”">
<label><span>Nama </span>
<input name=”name2″ type=”text” class=”inputM” id=”name2″ value=”Ivan silalahi” size=”20″ />
</label>

<label><span>Website</span>
<input name=”name” type=”text” class=”inputM” id=”name” value=”http://” size=”41″/>
</label>

<label><span>Komentar</span>
<textarea cols=”38″ rows=”5″ class=”textareaM”>Selamat datang di kumpulan tutorial website</textarea>
</label>
<label>
<div class=”spacer”><input type=”submit” name=”Submit” value=”Kirim” class=”buttonM”/>
</label>
</div>

</form>
</div>

</div>

Jika dijalankan pada browser, hasilnya akan tampak seperti gambar dibawah ini :

Anda Bisa downloadnya di : Download disini

Sekian dan terimakasih.

Tutorial Website : Tips Cara Mendapatkan Website Gratis

di tulis oleh: Ivan Silalahi

0 komentar

Halo semuanya kali ini saya akan coba menunjukkan suatu kombinasi yang efektif dan efisien serta sempurna dan gratis.

Pertama target riset saya lakukan terhadap dua penyedia domain?? redirection gratis yaitu uni.cc danco.cc . setelah saya teliti ternyata mereka berdua menyediakan “modify DNS”.

“modify DNS” adalah fasilitas untuk mengarahkan DNS domain ke hosting kita. feature ini sangat bagus mengingat penyedia free domain redirection yang lain hanya memberikan redirection biasa seperti domain gratis co.nr atau domain gratis .tk dan hanya sebatas cloaking…(Cloaking tidak efektif dan dibenci oleh google).

Selanjutnya adalah mencari hosting gratisan yang cocok dan bagus, saya mencoba 3 free hosting, sebagai test.., mereka yaitu :

Hosting Gratis:

1. 50webs.com
2. 000webhost
3. Freehostia.com

Test penggabungan co.cc dengan 50webs.com, DNS saya arahkan ke 50webs.com, pihak co.cc ok..!!, tapi setelah saya cek ternyata pihak 50webs.com memberikan “0″ addon domain (alias tidak mengizinkan “addon domain”, katanya sih harus upgrade )…. Test gagal..

Test penggabungan co.cc dengan 000webhost berjalan lancar hanya dengan beberapa jam saja, domain co.cc sudah konek dengan hosting 000webhost. Begitu juga dengan Freehostia, mereka juga bisa konek.

Caranya co.cc dg 000webhost:

Anda register dulu di uni.cc: https://www.co.cc/regist/regist_account.php?go_url=/my_account/my_account.php
Setelah register anda login, pilih salah satu website anda ex: narutopicture.co.cc
Klik tombol “Set up“, lalu masukkan dns1.000webhost.com dalam kotak Name Server1 dan dns2.000webhost.com dalam kotak Name Server2.
Anda register ke 000webhost: http://www.000webhost.com/order.php
Masukkan domain co.cc anda ex: narutopicture.co.cc ke kotak: I want to host my own domain (domain must be registered already).
Lalu anda isi form-form yang lain sesuai dengan data anda, dan submit
Tunggu 24 Jam dan hasilnya akan jadi.

Caranya uni.cc dg Freehostia:

Anda register dulu di uni.cc, lalu? DNS nya uni.cc arahkan ke Free?? Hostia (freehostia.com), Name Server-nya ada, lihat saja pada menu Addon Domain
Lalu pada cPanel Free Hostia (freehostia.com) pilih Addon Domain, masukkan domain kamu tadi,
ex: Belajar Pintar PHP.uni.cc (tanpa www)
Tunggu 24 Jam dan Jadi deh….

Info buat anda :

Setelah saya perhatikan uni.cc meminta anda untuk memasang banner mereka, jika tidak maka domain uni.cc anda akan di hapus.
Sahabat-sahabat semua juga lebih banyak yang suka dengan co.cc daripada uni.cc

Sekian dan selamat mencoba !!!

Tutorial Website : Membuat Logo Website Pada Addres Bar dengan Kode HTML

di tulis oleh: Ivan Silalahi

2 komentar

Favicon adalah icon kecil yang ada di url address bar, contohnya bisa anda lihat pada gambar di atas dan bisa juga masuk dalam daftar bookmark jika kita mem bookmark suatu situs yang mempunyai Favicon, untuk ukurannya favicon sendiri adalah 16 x 16 pixel.

Berikut tutorial nya bagaimana cara membuat Logo pada URL Address Browser:

caranya siapkan icon favorite anda, download icon-icon dibawah ini:

http://www.webdeveloper.com/favicon.ico
http://www.oscmax.com/favicon.ico
http://www.coffeecup.com/favicon.ico
http://unblock-url.qarchive.org/favicon.ico
http://www.pizzahut.com/favicon.ico
http://www.starbucks.com/favicon.ico

Setelah itu silahkan klik kanan salah satu icon, lalu pilih Save Image As.. -> lalu save
Cara pemasangannya bisa anda ~~Upload~~ dan letakkan di direcrtory root? dengan nama: favicon.ico

atau bisa juga letakkan tag di bawah ini dalam header anda

<head>
….
<LINK REL=”SHORTCUT ICON” href=”http://www.yourwebsite.com/favicon.ico” />
</head>

Selamat Mencoba !!!

Tutorial Website : Dasar Membuat Website Dengan HTML

di tulis oleh: Ivan Silalahi

1 komentar

Kali ini saya akan membagikan sebuah tutorial yaitu tutorial tutorial HTML dalam tutorial ini akan menjelaskan bagaimana website di bangun menggunakan tag-tag HTML, dan tutorial ini sangat cocok untuk pemula. Tapi sebelum ke TKP, ada yang perlu anda ketahui.

tag <>

digunakan untuk menuliskan sintak, ada dua jenis, yaitu tag container dan tag biasa.
Tag container adalah tag yang berisi text yang akan ditampilkan setelah tag ditutup.

Contoh: <td> text yang ditampilkan </td>.

Tapi lain halnya dengan tag yang satu ini, contoh <BR> (break). <br> tidak perlu ditutup oleh tag </br>, tapi jika sintak yang digunakan tag container, contoh: <h1>, harus ditutup dengan </h1>.
Tag yang digunakan untuk mengakhiri sintak punya karakter / (slash) sebelum sintaknya, contohnya: <td> </td>
Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: <body bgcolor=”red”> </body>. atau <input type=”text”>.

LANGKAH 1

MEMBUKA NOTEPAD.

LANGKAH 2

MENGETIKKAN SINTAK/SYNTAX.

Berikut ini adalah syntax dasar yang membentuk suatu HTML.

pertama, ketikkan
<html>
tekan enter, kemudian ketik
<head>

Dalam container head, kita bisa mengetikan beberapa sintak, tapi yang paling penting jangan lupa mengetikan sintak <title> judul halaman web </title>. Untuk sintak lain nanti saja.

Sekarang ketikkan sintak title tadi, jadi seperti ini:

<head> <title> judul halaman web </title> </head>

Kemudian ketikkan <body>. Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal dari <body>.

Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:

<html>
<head>
<title> Judul Halaman Web </title>
</head>
<body>
</body>

Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML? Ketikan sembarang text ke dalam tag body, contohnya seperti ini :

<body>
Contoh text yang ditampilin di halaman web
</body>
terus, jika sudah, ketikkan </html>, script lengkapnya seperti ini :
<html>
<head>
<title> Judul Halaman Web </title>
</head>
<body>
Contoh text yang ditampilkan di halaman web
</body>
</html>

jika sudah selesai, jangan lupa untuk save dengan nama dasarHTML.
jika sudah disave, buka data yang telah di save atau simpan tadi.

Pada bagian ini, kalian mungkin akan bingung karena html yang tadi disave ternyata gagal. Bahkan yang terbuka adalah file di notepad/wordpad.
Hal tersebut terjadi karena ketika men-save, file tersebut di save dalem bentuk TXT, bukan HTML. Nah cara men-save dalem bentuk HTML yaitu: ketika men-save, ada satu tempat di bawah tempat kita menulis nama file,? yakni Save As Type. Silahkan ubah dari text document(*.txt) menjadi all files, ketika menulis nama, di akhir di berikan extensi .html, contoh: dasarHTML.html.

Selamat Mencoba ...!!!

Tutorial Website : Konsep Dasar Membuat Web

di tulis oleh: Ivan Silalahi

1 komentar

Sebelum membuat web secara profesional, tugas penting sebagai seorang pengembang web
adalah memberikan ide dan gagasan tentang point apa saja yang akan ditampilkan dalam sebuah
halaman web. Dengan demikian, seorang pengembang web juga perlu berkonsultasi dengan
pemilik web itu sendiri agar segala sesuatu yang menjadi tujuan pemilik web dapat terpenuhi.
Lain halnya dengan seorang pengembang web (web developer) yang diberikan kebebasan
dalam membuat sebuah web. Pemiliki web umumnya mempercayakan sepenuhnya
kepada pengembang web (web developer). Nah, jika demikian maka sebagai seorang
pengembang web harus benar-benar membuktikan keterampilannya dalam membuat web
secara profesional agar para pemiliki web tidak kecewa dengan karya yang telah dibuat.

Untuk menjadi seorang pengembang web profesional tidaklah mudah karena harus
memadukan antara bahasa pemrograman web dengan nilai seni yang terdapat dalam
setiap halaman web. Keduanya harus dimiliiki, jika salah satu saja maka belum bisa
disebut sebagai seorang pengembang web profesional. Meskipun pintar bahasa php
dalam membuat web, tapi jika tidak didukung oleh jiwa seni maka hasilnya kurang
maksimal. Begitu pula sebaliknya, jika hanya pandai membuat tampilan halaman web
tapi tidak didukung oleh pengetahuan tentang bahasa pemrograman web maka hal itu
akan sia-sia saja.

Sebagai seorang pengembang web pemula, tidak perlu berkecil hati jika ingin menjadi
seorang pengembang web profesional. Yang terpenting adalah adanya kemauan untuk
terus belajar dan belajar lagi agar wawasan tentang pengembangan web terus bertambah.
Ada beberapa hal yang perlu diketahui oleh para pengembang web pemula ketika
pertama kali ingin membangun sebuah web dari awal. Agar web yang dibuat nampak
profesional perlu memahami beberapa konsep dasar dalam mengolah web, mulai dari
tool yang digunakan, format gambar yang sesuai, hingga pemilihan warna teks dan latar
belakang sebuah halaman web.

SOFTWARE DESAIN GRAFIS

Dalam merancang sebuah website, kita tidak bisa lepas dari perangkat lunak untuk
mengolah gambar (image) sebagai bagian dari website. Ada beberapa alat disain grafis
yang dapat digunakan untuk membantu dalam membuat website yang cantik,
diantaranya:

1. Adobe Photoshop (http://www.adobe.com/) : software ini sangat populer dan dapat
diandalkan untuk membuat dan mengedit grafik maupun gambar fotografi.
2. Adobe Illustrator (http://www.adobe.com/) : software ini digunakan untuk membuat
gambar dalam bentuk vektor dan dapat digunakan untuk membuat ilustrasi.
3. PaintShop Pro (http://www.jasc.com/) : software ini sama dengan Adobe Photoshop,
sedikit lebih canggih namun tidak masih kalah populer dibandingkan Adobe Photoshop.
4. Macromedia Fireworks (http://www.adobe.com) : software ini sangat mirip dengan
Adobe Photoshop, namun tool ini berbasis vektor. Software ini mengijinkan semua
elemen dapat diedit kembali dan dapat berintegrasi dengan Macromedia Dreamweaver.
Sebagai tambahan, oleh karena seluruh produk Macromedia diakuisisi oleh Adobe maka
namanya berubah menjadi Adobe Macromedia Fireworks.
5. Macromedia Flash (http://www.adobe.com) : software ini dapat digunakan untuk
membuat animasi dan berbasis vektor untuk website.

FORMAT GRAFIS

Grafik/gambar dalam sebuah website dapat memberikan efek visual yang luar biasa
terhadap website tersebut, namun bisa menambah waktu koneksi akibat banyaknya
gambar yang ditampilkan. Grafik dalam website dapat berupa statik, animasi, dan
fotografi.
Agar koneksi ke website kita lebih cepat, perlu memahami beberapa format file yang
sering digunakan pada sebuah website, diantaranya:
1. GIF : memiliki warna 8-bit, mendukung dalam bentuk transparan, mengkompresi area
warna secara solid, mereduksi jumlah warna dan menjalin untuk proses download
secara cepat, juga dapat digunakan untuk membuat animasi dalam bentuk grafik
(animated graphic).
2. JPG : memiliki warna 24-bit,menjaga kualitas brightness dan hue yang ditemukan
dalam sebuah foto, dapat disimpan dalam format berkualits tinggi maupun rendan (high
or low resolution), sebuah file jpg dapat pula digunakan versi resolusi rendah (low
resolution) dari gambar yang nampak ketika gambar sedang didownload, tidak
mendukung transparansi.
3. PNG : PNG-8 mendukung warna 8 bit, mengkompres area warna yang pekat, menjaga
detail ketajaman, mendukung transparansi, kompresi lebih canggih dibandingkan gif
karena dapat mengkompresi sekitar 10-30% lebih kecil dari format GIF.
Setelah melihat perbandingan beberapa format file grafis untuk web, Anda dapat
menentukan format apa yang akan digunakan sesuai kebutuhan. Pada prinsipnya, semua
format file tersebut dapat dijadikan panduan dalam memilih format file yang tepat.

Ada beberapa bahan pertimbangan ketika memilih salah satu dari beberapa format file
tersebut, diantaranya:
- Usahakan ukuran file seminimal mungkin
- Selalu gunakan mode warna RGB
- Gunakan web pallete (216 web-safe colour)

Jika Anda memilih format file GIF : simpan sedikit warna jika perlu, simpanlah sebagai
interlaced .gif, buatlah latar belakang transparan berwarna.
Jika Anda memilih format file JPG : pilih kualitas yang paling kecil jika perlu, dan
simpan sebagai progresive.