Banyak cara untuk membuat Home Page, langkah-langkah tersebut pada dasarnya adalah :
1. Membuat Sketsa Desain :
Dalam mendesain suatu homepage langkah pertama yang dilakukan adalah membuat sketsa disain pada kertas, hal ini dilakukan untuk memberi gambaran bagaimana homepage kita nanti setelah selesai dan bagaimana cara mengatur letak letaknya. tetapi untuk kebanyakan orang langkah ini biasanya dilewati dan langgsung meloncat ke langkah kedua.
2. Membuat Layout Desain :
Setelah sketsa sudah jadi, kita menggunakan software seperti Adobe Photoshop, Adobe Illustrator, Macromedia Fireworks dan Macromedia Freehand untuk memperhalus sketsa desain dan juga menambahkan efek efek pada sketsa tersebut. Setelah layout desain homepage sudah jadi. File gambar tersebut dipecah menjadi potongan kecil-kecil untuk mengoptimize waktu download. arena file gambar biasanya berukuran besar sehingga akan memerlukan waktu lama untuk membuka untuk membuka halaman web yang memakai gambar tersebut. Untuk melakukan hal tersebut kita dapat menggunakan software Adobe Image Ready. Software ini dapat langsung memotong gambar yang besar tadi dan otomatis juga menjadikannya ke dalam format html. Langkah ini bisa saja dilewatkan bila ukuran gambar kita tidak terlalu besar.
3. Membuat Animasi :
Animasi diperlukan untuk menghidupkan homepage kita agar menarik pengunjung. Macromedia Flash dan Gif Construction Set dapat dipakai untuk melakukan hal tersebut.
4. Membuat HTML :
Setelah itu kita merapikan layout desain kita seperti menempatkan beberapa tombol dan gambar, menambah text, mengedit script HTML, membuat layout form ke dalam format HTML. Untuk itu kita perlu software HTML Editor seperti Macromedia Dreamweaver, Microsoft Frontpage dan Allaire Homesite.
5. Programming dan Script :
Untuk website e-commerce, iklan baris, lelang, database, membuat guestbook, counter dan forum diskusi. selain itu script ini juga dapat digunakan untuk mempercantik halaman web kita antara lain membuat animasi text, membuat animasi pada background dan lain lain. File HTML kita perlu programming untuk melakukan aktivitas semacam itu. Programming dan script ini bisa dibuat dengan menggunakan ASP, Borland Delphy, CGI, PHP, Visual Basic dan yang terkenal saat ini adalah dengan menggunakan java script.
6. Upload HTML :
Setelah file kita telah menjadi html beserta gambar dan scriptnya. Kita perlu meng-upload file kita ke suatu tempat ( hosting ), agar semua orang di dunia dapat mengakses halaman html kita. Biasanya Macromedia Dreamweaver dengan fasilitas site FTP dan Microsoft Frontpage dengan Publishnya telah menyediakan fasilitas upload ini. Atau dapat menggunakan software seperti WS-FTP, Cute FTP, Bullet FTP. Yang perlu menjadi catatan di sini adalah jika kita menggunakan microsoft frontpage kita harus memilih hosting yang mendukung frontpage ini karena tidak semua hosting mendukung frontpage, terutama hosting gratis.
7. Memilih Hosting :
Untuk homepage pribadi atau yang sekedar ingin coba-coba biasanya setelah file html sudah jadi dapat hosting di tempat-tempat gratis, memakai guestbook dan counter gratis dan menambah macam-macam accesories dalam mempercantik homepage pribadi tersebut. Contohnya yaa seperti homepage saya ini. Lihat tutorial Fasilitas gratis pendukung homepage.
8. Software-Software yang dipakai
Desain : untuk membuat desain suatu homepage biasanya para web designer dimulai dengan software ini sebagai tampilan sementara atau dalam membuat layout homepage.
· Adobe Photoshop : Desain berbasis titik (bitmap).
· Adobe Image Ready : Memotong gambar-gambar ke dalam format html
· Adobe Illustrator : Desain berbasis vector
· CorelDraw : Desain berbasis vector
· Macromedia Freehand : Desain berbasis vector
Efek Desain : hal ini dilakukan untuk menghidupkan desain yang telah kita rancang. Seperti menambah efek cahaya, textur dan manipulasi teks.
1. Macromedia Firework : Efek teks
2. Painter : Memberikan efek lukisan
3. Ulead Photo Impact : Efek frame dan merancangan icon yang cantik.
4. Plugins Photoshop : Seperti Andromeda, Alien Skin, Eye Candy, Kai’s Power Tool dan Xenofex juga sangat mendukung untuk memberi efek desain sewaktu anda mendesain layout homepage di Photoshop.
Animasi : Penambahan animasi perlu untuk membuat homepage agar kelihatan menarik dan hidup.
1. 3D Studio Max : Untuk membuat objek dan animasi 3D.
2. Gif Construction Set : Membuat animasi file gif
3. Macromedia Flash : Menampilkan animasi berbasis vector yang berukuran kecil.
4. Microsoft Gif Animator : Membuat animasi file gif
5. Swift 3D : Merancang animasi 3D dengan format file FLASH.
6. Swish : Membuat berbagai macam efek text dengan format file FLASH.
7. Ulead Cool 3D : Membuat animasi efek text 3D.
8. Web Editor : menyatukan keseluruhan gambar dan tata letak desain, animasi, mengisi halaman web dengan teks dan sedikit bahasa script.
· Alaire Homesite :
· Cold Fusion :
· Microsoft Frontpage :
· Macromedia Dreamweaver :
· Net Object Fusion :
Programming : hal ini dilakukan setelah sebagian besar desain homepage telah rampung. Programming bertugas sebagai akses database, form isian dan membuat web lebih interaktif.
Contoh : Membuat guestbook, Form isian, Forum, Chattin Portal, Lelang dan Iklanbaris.
1. ASP ( Active Server Page ) :
2. Borland Delphy :
3. CGI ( Common Gateway Interface ) :
4. PHP :
5. Perl :
6. Javascript Upload : html kita perlu di letakkan ( upload ) di suatu tempat ( hosting ) agar orang di seluruh dunia dapat melihat homepage kita.
1. Bullet FTP :
2. Cute FTP :
3. WS-FTP :
4. Macromedia Dreamweaver : dengan fasilitas Site FTP
5. Microsoft Frontpage : dengan fasilitas Publish Sound Editor : homepage kita belum hidup tanpa musik. Untuk mengedit file midi atau wav, perlu alat khusus untuk itu.
1. Sound Forge : Mengedit dan menambah efek file yang berformat mp3 dan wav.
2. Cakewalk : Mengedit dan menambah efek untuk file yang berformat midi Banyak sekali memang software untuk membuat suatu homepage dan kita tidak perlu mempelajari semua software tersebut di atas. Tapi untuk mempermudah, bagi pemula lebih baik dimulai terlebih dulu dengan mempelajari software Microsoft Frontpage atau Macromedia Dreamweaver agar lebih mengenal aturan-aturan membuat homepage dan mengenal bahasa html. Setelah itu baru Adobe Photoshop yang dipakai kebanyakan para desainer.
FASILITAS GRATIS PENDUKUNG HOMEPAGE
Berikut ini adalah fasilitas-fasilitas gratis yang bisa kita dapatkan dari internet untuk membuat homepage kita menjadi semakin powerfull. Tentunya hal yang kita dapatkan secara gratis akan diimbangi dengan sesuatu yang harus kita terima. Biasanya mereka menampilkan banner di homepage kita dan ini sebenarnya sangat menganggu, tapi tetap saja kita harus menerima bila ingin menggunakan fasilitas gratis tersebut.
Guesbook
Buku tamu di mana orang bisa mengisi identitas tentang dirinya, mengkritik dan memberi saran.
· Lpage
· Guestpage :
Mudah di setup (using html tag) agar sesuai dengan tampilan design yang anda mau. Selain itu mereka menyediakan beberapa template guessbook yang ok kalo kita ngga mau cape2 setup.
· The Guestbook
· CounterMenghitung seberapa banyak pengunjung yang telah masuk ke homepage kita. Penyedia counter gratis antara lain :
· Dark Counter : menyediakan puluhan model counter sebagai pilihan.
· PageCount
· The Counter
Web Hosting
Tempat menyimpan file html, agar desain homepage kita dapat dilihat oleh pengunjung di seluruh dunia.
· Cybercity
· Freeservers
· Geocities
· Fortunecity
· Xoom
Email
Anda bisa mendapatkan fasilitas email gratis tanpa perlu mendaftarkan diri ke Internet Provider.
· Mailexite
· Netadress
· Geocities
· iName
· Mailcity
Direct URL
Bila url anda terlalu panjang, misalkan : http://www.geocities.com/area51/station/007, maka dengan direct url ini nama url itu bisa di singkat dengan http://i.am/007.
· CyberName
· Free URL
· Easy to Remember
· Name Zero : fasilitas ini memberikan kita nama domain dot com
Chatting
Fasilitas ngobrol dapat di buat di homepage Anda sendiri.
· BraveNet Wev Services : Free guestbooks, message forums, form processors, greeting cards, hit counters, search engines and more!
Pooling
Bila Anda ingin tahu jawaban terbanyak dari para pengunjung tentang pilihan dari pertanyaan-pertanyaan Anda.
· BraveNet Wev Services : Free guestbooks, message forums, form processors, greeting cards, hit counters, search engines and more!
Web Promote
Mempromosikan homepage anda dengan sekali klik, maka homepage kita akan masuk ke beberapa situs search engine.
· Linksubmission
· Jayde
· Fast submit
· Selfpromotion
· Add-Me
· Submit It!
Mailing List
Membuat komunitas lewat email yang membicarakan hal-hal tertentu bersama orang lain.
· Egroups
· Listbot
· Onelist
Web Statistik
Melihat statistik homepage Anda. Dari mana saja pengunjung berasal, browser apa saja yang mereka pakai, hari apa saja homepage kita ramai dikunjungi orang.
· Web Statistic
Web Check
Mengetahui kecepatan loading dan spesifikasi tentang homepage anda.
· NetMechanic
· Web Site Garage
Lain-Lain
· BraveNet Wev Services : Free guestbooks, message forums, form processors, greeting cards, hit counters, search engines dan lain-lain..!
cara untuk membuat Home Page..
XHTML Bahasa Web Masa Depan
HTML adalah “bahasa” web yang sehari-hari seorang desainer Web pergauli, baik itu secara langsung, maupun secara tidak langsung. Sejak tahun 1990-an HTML dipergunakan untuk menghantarkan informasi dari satu komputer ke komputer lain melalui Web browser. Zaman mengalami perubahan, kini, posisi HTML akan digantikan dengan XHTML. Apakah itu XHTML?
XHTML singkatan dari Extensible Hipertext Markup Language adalah “bahasa baru” yang dibuat oleh W3C untuk menggantikan kedudukan HTML. Namun sebenarnya, XHTML adalah gabungan dari HTML dan XML. Sejak kelahirannya XHTML 1.0 pada tahun 2000, kemudian XHTML 1.1 dirilis pada tahun 2001. Tentu saja dengan adanya XHTML tidak semata-mata hanya menggantikan, tentunya XHTML memiliki kelebihan dibandingkan dengan HTML.
XHTML dibuat dengan tujuan agar terdapat sebuah “bahasa” standar yang dapat digunakan oleh aplikasi lain secara luas dan oleh platform yang berbeda. Dengan menggunakan XHTML, sebuah situs masih dapat dinikmati dengan baik menggunakan browser teks, PDA, Phone Cell, dan lain-lain. Sedangkan HTML hanya dapat dinikmati dengan baik bila menggunakan Web Browser seperti IE atau Netscape. Hal ini memungkinkan halaman Web yang menggunakan HTML akan lebih dapat diterima secara luas oleh berbagai aplikasi.
Dalam XHTML muncul aturan-aturan baru yang berbeda dengan HTML, penggunaan tag HTML dipersempit dan penggunaan CSS diperluas. Namun XHTML menerapkan 3 aturan untuk penulisan tag, antara lain:
XHTML - Strict / strict doctype declaration: Penggunaan doctype ini, Anda mengontrol seluruh layout dan format sebuah halaman Web melalui CSS. Tidak menggunakan tag font dan table (deprecated).
XHTML - Transitional / transitional doctype declaration: Anda dapat menggunakan sebagian besar tag-tag HTML seperti Font dan Table untuk melayout halaman.
XHTML - Frames / frameset declaration: Penggunaan Frame pada halaman Web.
XHTML memungkinkan sebuah halaman Web dapat terlihat lebih bersih karena penggunaan CSS (baik itu external, embeded, atau in line) dalam memformat halaman Web.
Tips & Trik design web
Bermacam-macam cara untuk mendesign sebuah halaman weh agar kelihatan lebih menarik, Berikut adalah "Tips dan Trik Design Web".
Adobe Image Ready : Memotong gambar-gambar ke dalam format html
Adobe Illustrator : Desain berbasis vector
Efek Desain : Hal ini dilakukan untuk menghidupkan desain yang telah kita rancang. Seperti menambah efek cahaya, textur dan manipulasi teks.
Plugins Photoshop : Seperti Andromeda, Alien Skin, Eye Candy, Kai’s Power Tool dan Xenofex juga sangat mendukung untuk memberi efek desain sewaktu anda mendesain layout homepage di Photoshop.
Animasi : Penambahan animasi perlu untuk membuat homepage agar kelihatan menarik dan hidup.
Gif Construction Set : Membuat animasi file gif
Macromedia Flash : Menampilkan animasi berbasis vector yang berukuran kecil.
Microsoft Gif Animator : Membuat animasi file gif
Swift 3D : Merancang animasi 3D dengan format file FLASH.
Swish : Membuat berbagai macam efek text dengan format file FLASH.
Web Editor : Menyatukan keseluruhan gambar dan tata letak desain, animasi, mengisi halaman web dengan teks dan sedikit bahasa script.
Alaire Homesite
Cold Fusion
Microsoft Frontpage
Macromedia Dreamweaver
Net Object Fusion
Programming : Hal ini dilakukan setelah sebagian besar desain homepage telah rampung. Programming bertugas sebagai akses database, form isian dan membuat web lebih interaktif. Contoh : Membuat guestbook, Form isian, Forum, Chatting, Portal, Lelang dan Iklanbaris.
ASP ( Active Server Page )
Borland Delphy
CGI ( Common Gateway Interface )
PHP
Perl
Upload : File html kita perlu di letakkan ( upload ) di suatu tempat ( hosting ) agar orang di seluruh dunia dapat melihat homepage kita.
Bullet FTP
Cute FTP
WS-FTP
Macromedia Dreamweaver : dengan fasilitas Site FTP
Microsoft Frontpage : dengan fasilitas Publish
Sound Editor : Homepage kita belum hidup tanpa musik. Untuk mengedit file midi atau wav, perlu alat khusus untuk itu.
Sound Forge : Mengedit dan menambah efek file yang berformat mp3 dan wav.
Cakewalk : Mengedit dan menambah efek untuk file yang berformat midi
3 tEknik mendeSign tAmpiLan wEb..
Sebagai web desainer, tentunya Anda harus tahu dahulu teknik-teknik dasar dalam mendesain suatu website. Berbagai macam desain website yang tentunya menarik, cantik, apik dan lain sebagainya dibuat berdasarkan 3 (tiga) teori dibawah ini yaitu:
- Teknik disain es (ice design technic) - Teknik disain air (water design technic) - Teknik disain jelly (jelly design technic)
Teknik desain es Dari namanya "es" berarti adalah suatu zat beku yang solid dan telah dibentuk sesuai dengan keinginan pembuatnya. Dalam dunia web, ini berarti desain tampilan homepage atau website Anda sifatnya adalah fixed sized. Artinya adalah ukuran elemen-elemen webnya telah ditetapkan oleh web desainernya. Contoh:
- Jika sesuai pada contoh di atas lebar tabel adalah 770 pixel dan resolusi yang digunakan browser adalah 640x480, maka akan terjadi scrolling pada browser. Ini tentu saja akan mengganggu navigasi dan tampilan. - Dengan lebar 770 pixel berarti tampilan akan terlihat rapi bila browser menggunakan minimal resolusi 800x600. - Kadang harus disesuaikan dahulu dengan content yang ada dalam web agar terlihat lebih rapi.
Kelebihan teknik ini adalah:
- Cara ini mudah diterapkan, karena tidak perlu membandingkan antara desain dan tampilan, jadi tidak perlu bolak-balik mengetest hasilnya antara HTML editor dan browser.
Teknik desain air Ibaratnya suatu zat cair akan berubah bentuk sesuai dengan wadahnya. Dalam web ini berarti desain website Anda akan bersifat fleksibel sekali. Contoh teknik ini adalah ditandai dengan penggunaan angka persentase pada sebagian elemen tag website Anda.
Contoh:
Hal tersebut juga mengandung kelebihan dan kekurangan yaitu:
Kekurangan:
- Anda akan menemui kesulitan dalam proses bolak-balik mengetest hasilnya antara HTML editor dan browser. Hal ini disebabkan Anda harus mencoba range persentase dan tampilan browser dan resolusi layar.
Kelebihan: - Hasil desain website akan terlihat bagus walau Anda menggunakan resolusi layar berapapun. Ini disebabkan kemudahan dan fleksibilitas teknik air. Tentu saja ini juga harus disesuaikan dengan jenis content dari website Anda.
Teknik desain jelly Teknik ini adalah gabungan dari kedua teknik diatas, air dan es. Jelly adalah sebuah substansi yang tidak bisa dibilang cair atau dibilang padat. Jika Anda pernah menemui produk makanan jelly ini dipasaran Anda akan melihat bahwa jelly ini kelihatan unik sekali baik bentuk ataupun rasa.
Contoh:
Pada contoh di atas adalah suatu tag TABLE (untuk pembuatan suatu tabel) dimana tag TABLE ini memiliki beberapa elemen yaitu WIDTH (untuk mengatur lebar tabel) dan HEIGHT (untuk mengatur tinggi tabel). Pada contoh di atas diberi contoh pada saat pengaturan elemen WIDTH digunakan fixed size sebesar 770 pixel tetapi untuk elemen HEIGHT nya di set proporsional yaitu sebesar 100% dari tinggi browser saat itu.
Untuk teknik jelly Anda harus butuh tenaga ekstra karena kelebihan dikedua teknik di atas digabung menjadi satu dan kelemahannya juga digabung tetapi hasilnya akan luar biasa sekali bagusnya
Memberi arti dalam XHTML
Kode yang kita tulis dalam sebuah Web, memiliki makna yang luas. Misalnya, “p” yang berarti paragraf, tag tersebut tidak menjelaskan secara rinci mengenai apakah paragaf tersebut merupakan summary, atau mungkin nama penulis, dan lain sebagainya. Sebuah Semantic Markup memperkenalkan semantic markup.
Ide dari semantic markup adalah memberikan arti pada setiap tag yang kita tulis. Seperti kita tahu, tag dasar tidak memberikan arti secara spesifik akan konten yang kita tulis. Tag yang memiliki arti, akan mempermudah memahami apa konten dari teks yang diapit oleh tag tersebut.
Bagaimana memberikan “arti” pada sebuah tag? Solusi yang dapat kita pergunakan adalah dengan memberikan nama ID dan Class dari sebuah tag yang dapat dimengerti dan mencerminkan apa makna dari konten yang terdapat dalam tag tersebut. Perhatikan:
Penggunaan nama ID dan Class yang kurang baik:
Penggunaan nama ID dan Class diatas seharusnya:
Contoh lainnya:
Selamat Datang di Design World,situs ini menyajikan artikel-artikeldesain bla..bla..bla..
Akan lebih baik jika:
Selamat Datang di Design World,situs ini menyajikan artikel-artikeldesain bla..bla..bla..
Arti dan Format
Penerapan semantic markup akan mengalami kendala pada penyeragaman format. Contohnya begini, bila kita membuat banyak halaman, dan membutuhkan sebuah format css yang sama dan standard dimana dibutuhkan sebuah nama class atau ID yang dipergunakan berulang-ulang pada setiap halaman maka untuk mempermudah dipilihlah nama class yang mudah dihapal, misalnya: teks1, teks2, teks3, dan sebagainya.Kita masih dapat menerapkan arti kepada sebuah tag tanpa kehilangan format:
Ada beberapa rekan yang menyatakan bahwaartikel-artikel di designworld bermanfaatketika mereka melakukan interview dantes kemampuan ketika melamar kepada sebuah perusahaan,saya ikut merasa senang bila bermanfaat bagi Anda,dan hal ini yang membuat saya akan mencoba untukterus menulis dan berbagi pengetahuan dengan Anda.
Memberikan Arti dalam kode akan mempermudah bagi orang-orang yang melihat kode Anda antara lain adalah programmer. Anda sendiri akan dipermudah bila dimasa yang akan datang melakukan perubahan terhadap kode tersebut.






