Posted by: Black_Claw | January 24, 2007

CARA BEGO : Bikin Situs

COURSE 1. Euh, SITUS?

Q : "Akhr-akhir ini saya liat di plasa banyak yang pengen tau soal web ama bikin
situs prbadi ya claw. Kayaknya saya juga uda ketularan nih…!!! Saya pengen
bisa bikin juga. Kamu bisa ngajarin saya ngga?"

A : "Bisa ajah, tapi kalo kamu mau yang instan, kamu bisa langsung SIGN ke
hoster yang punya SITE BUILDER. Contohnya Geocities. Sayangnya, tiap hoster beda
caranya. Misalnya Geocities beda ma freewebs. So, kamu kudu ngandalin banget
kemampuan Bahasa Inggris kamu ama dasar dasar jaringan yang ngatur tampilan
situs."

Q : "Nah. Kbetulan ntuh! Saya emang mo belajar dari dasar. Ajarin saya dong!"

A : "Ooookie. Pertama-tama, kita harus tau dulu, apa ntuh situs ama web. Key?
Seperti kata orang kuno, Mengenal Medan Terlebih dahulu, baru bisa berperang.
Sama Kayak slogan VINI VIDI VICI yang artinya saya lihat, saya datang, saya
menang. Bicara soal jaman dulu, saya jadi ingat kakek saya dulu, dia sering
cerita. Jadi pada waktu itu, dia masih kecil, tinggal di DOMPU, Nusa tenggara
barat, trus dia….

Q : " WOOOIITT!!!! STOPPPP!!!! kalo kamu cerita kapan dong ngajarnya?!?!?!"

A : "Oh, sorry! Sorry! Oke, Jadi kita mulai duru dari awal. Kamu tau ga? Asalnya
sebuah situs bisa keliatan kayak gini adalah daripada yang disebut bahasa yang
bernama HTML. Okey. HTML. Hiper transper markap lansayaj dalam vokal
indonesianya. HTML adalah bahasa yang kita gunakan buat ngebikin situs. Kita
naroh ni HTML di server, atawa di hoster kita, setelah kita registrasi/daftar
tentunya. Setelah kita taroh di server, HTML inilah yang diakses oleh orang yang
melihat situs kita nanti. Nah, saat HTML itu diakses, HTML akan memberi perintah
tampilan ke komputer orang yang mengakses, bagaimana browser orang tersebut
(misalnya intrernet explorer) harus menampilkan bagaimana bentuk situs kita.
logikanya Begini :

ANGGAPLAH ADA ORANG YANG BERCERITA KEPADA KITA TENTANG SEBUAH POT BUNGA,
BAGAIMANA BENTUKNYA, SEBERAPA TINGGINYA, APA WARNANYA, KEMUDIAN KITA
MEMBAYANGKANNYA DALAM KEPALA KITA SEHINGGA KITA SEOLAH OLAH BISA MELIHAT POT
BUNGA NTUH.

Orang yang bercerita adalah SERVER
Kata kata yang diucapkannya adalah HTML
Kita adalah BROWSER YANG DIGUNAKAN UNTUK MENGAKSES INTERNET
Bayangan pot bunga dalam kepala kita adalah TAMPILAN SITUS

Jadi supaya kamu bisa membayangkan gimana pot itu dengan benar,kamu harus bisa
ngerti apa arti omongan ntuh orang. Betul? Jadi bikin HTML ga ngasal choy! HTML
kamu harus bener, jadi browser orang yang ngakses bisa ngerti en "NGEBAYANGIN"
kayak apa bentuk situs kamu. Ngerti?"

Q : "Oke! Saya ngerti. Lanjutin DOng!?"

A : "Nah, Untuk situs yang bagus, sebaiknya jangan cuman bikin satu halaman!
Harus yang banyakan dikit lah, minimal 3. Misalnya situs pribadi terdiri dari 3
halaman yaitu halaman muka, buku tamu, dan profil kamu. kudu tuh! Masa’ kamu mo
numplek blekin di satu halaman? Ga etis gituloh!

Berikut, supaya orang yang ngakses situs kamu bisa pindah ke halaman lain,
misalnya dari HALAMAN MUKA mau ke HALAMAN PROFIL, kudu dikasih yang namanya
LINK. Link itu KATA KATA ATAWA GAMBAR YANG BISA DI KLIK sehingga orang bisa
loncat atawa pindah halaman. Jadi Kamu kudu nempatin yang namanya LINK ntu, di
TIAP HALAMAN YANG KAMU PENGEN HUBUNGIN DENGAN YANG LAINNYA. Contohnya :

KALO KAMU PENGEN ORANG BISA NGAKSES HALAMAN PROFIL KAMU LEWAT HALAMAN MUKA, KAMU
KUDU NEMPATIN LINK YANG NYAMBUNG KE HALAMAN PROFIL DI HALAMAN MUKA. BEGITU PULA
SEBALIKNYA KALO KAMU PENGEN ORANG BISA NGAKSES BALIK DARI HALAMAN PROFIL KE
HALAMAN MUKA. KAMU KUDU NGASIH LINK YANG NYAMBUNG KE HALAMAN MUKA DI HALAMAN
PROFIL!

Clear dude?

Q : Get it bro. Next, please…

A : Nah, setelah html sudah selesai, misalnya udah kamu buat atau kamu
generating sendiri dengan menggunakan program yang bisa menggenerate html, kamu
buka notepad, kemudian kamu save as dengan tipikal ALL FILES dan BEREXTENSION
.html (MISALNYA matrix.html) kemudian kamu upload ke server atawa hoster kamu,
Di tiap hoster kudu ada nyang namanye tombol upload. Klik ntuh tombol, trus
BROWSE dimana kamu nyimpen ntuh file .HTML yang disave pake ntuh notepad. nah,
file itu akan TERUPLOAD KE SERVER KAMU.

Ntar, kalau file tersebut mau diakses, alamatnya adalah http://www.namaserver.kamu/matrix.html
Misalkan kamu upload di geocities, maka namanya akan menjadi http://www.geocities.com/1234/matrix.html

http://www.geocities.com adalah alamat HOSTER/SERVER KAMU.
1234 adalah USERNAME/DOMAIN kamu
dan matrix.html adalah nama file yang kamu upload

Seandainya namanya bukan matrix, misalnya kentut, maka alamatnya menjadi:
http://www.geocities.com/1234/kentut.html

Gimana? Ngerti??"

Q : "MUAHAHAHAHAHAHAHA!!!! GAMPANG BANGET! Saya khan jenius! LANJUUUT!"

A : "Bila terdapat file dangan nama index.html pada domain kamu, maka orang yang
ingin mengakses tidak perlu menuliskan http://www.geocities.com/1234/index.html,
tetapi cukup dengan menuliskan http://www.geocities.com/1234 karena komputer pengakses
akan secara langsung mengakses file yang namanya INDEx pada domain di server
kamu.

Hal yang sama juga berlaku pada index.php? index.thl pokoke, asal namanya index
deh!"

Q : "Okey bang! Saya mengerti semua! Trus selanjutnya…?"

A : "Selamat! Jika kamu memang benar benar mengerti dan 10000%paham maksud dari
kata kata saya, kamu sudah selesai mempelajari DASAR LOGIKA KERJA DARI HTML.

Untuk tutorial berikutnya, untuk membuat kamu lebih mudah mengerti, siapkanlah
sebuah program bernama MICROSOFT FRONTPAGE yang satu bundel DENGAN MICROSOFT
OFFICE. Setelah segalanya siap, silahkan maju ke course 2!"

COURSE 2. BELAJAR HTML? YEAH!

Q : "Yup! Saya uda dapat programnya. Bisa kita mulai?"

A : "Cotto..! Cotto matte~ne…!!! Sebelumnya, kamu kudu tau kita bakalan banyak
berfokus pada tiga tombol utama pada pembelajaran kita kali ini. Sekarang buka
ntuh FRONTPAGE trus new, blank page, en cari TOMBOL :
[NORMAL], [HTML], Dan [PREVIEW]. Adanya di bagian bawah. Setelah dapat, bilang!"

Q : "OKE! DAPET! HOREEEEEE!!!!"

A : "jangan nyengir dulu. Dengerin! Normal adalah tampilan dimana kita dapat
membuat situs seperti kita ngetik di word, html adalah tempat kita ngeliat
htmlnya, trus preview adalah tampilan dari situs yang kita buat saat di preview
tanpa margins dan coloum. Ngerti?!?!"

Q : "Mmmm… Yep. Bisa… Bisa…"

A : "Oookie. Sekarang klik [html] dan hapus semua tulisan yang ada disana.
sudah?"

Q : "Oookie, sudah. Trus?"

A : "Html ntu, punya format yang kaga bisa diubah!

<html>
<head>
judul dari halaman
</head>
<body>
TEMPAT DIMANA KAMU NULIS SEMUA YANG KAMU PENGEN TULIS DI SITUS KAMU
</body>
</html>

Pada bahasa html, perintah diletakkan dalam tanda "<perntah>" dan kemudian
dilanjutkan dengan isi perintah dan diakhiri dengan tandan tutup perinatah yaitu
"</perintah>

Mudahnya seperti ini

<beli sayur> di pasar </beli sayur>

atau

<saat ini> <di pasar> beli sayur </di pasar> </saat ini>

Mengerti?"

Kalo kamu sudah mengerti, sekarang coba Balik ke [normal] dan tuliskan kata
berikut : http://www.geocities.com/1234/matrix.html setelah itu, pencet spasi di
keyboard kamu." Normalnya, huruf tersebut akan menjadi biru dan bergaris bawah.
Setelah itu, kamu klik [html]. maka akan ada kode berikut :

<p><a href="http://www.geocities.com/1234/matrix.html"&gt;
http://www.geocities.com/1234/matrix.html</a&gt; </p>

Kemudian ubah
http://www.geocities.com/1234/matrix.html yang kedua menjadi tulisan "link saya"
tanpa tanda kutip"

Contoh : <p><a href="http://www.geocities.com/1234/matrix.html"&gt;
link saya</a> </p>

Klik Lagi normal, maka kamu akan melihat tulisan : "link saya" tanpa tanda kutip
yang berwarna biru dan diberi garis bawah. Ada ga tuh?"

Q : "Ada nih! ADa! Trus maksudnya,Claw?"

A : "Nah, gitu tuh, kode untuk bikin link. Lebih jelasnya begini :

<p><a href="TEMPAT KAMU NULIS URL/ALAMAT KEMANA LINK TERSEBUT NYAMBUNG (TANDA
KUTIP JANGAN DIHILANGKAN)">
TEMPAT KAMU NULIS LINK ITU MO DINAMAIN APA (MISALNYA : Profil, dsbg)</a> </p>

Jadi misalnya tempat file yang kamu mau hubungkan itu lokasinya di http://www.geocities.com/1234/kentut.html
dan kamu mau tulisan yang bisa kamu klik untuk loncat ke halaman tersebut adalah
kentut saya, kodenya seperti ini :

<p><a href="http://www.geocities.com/1234/kentut.html"&gt;
kentut saya</a> </p>

Q : "Ooooohhhhh!!! Gitu to! oke! karang kalo linknya berupa gambar gimana?"

A : "Pertama, buka internet, dan coylah sebuah gambar dari internet, dan paste
di bagian [NORMAL] Setelah itu, buka [HTML], Maka akan ada kode berikut :

<p><img border="0" src="http://www.freewebs.com/lk.jpg&quot; width="1024"
height="768"></p>

img border="0" = IMG border adalah garis pinggir yang ada pada gambar. "0"
menunjukkan tidak ada garis pinggir. Untuk menambah ketebalan border, ubah saja
angka 0 itu jadi 3,4,5, dst.

src="http://www.freewebs.com/lk.jpg&quot; = Ini adalah alamat tempat gambar yang
sudah kita upload. Ingat! Kamu harus ngupload dulu gambarmu di domain pada
server hoster kamu, kalo ga, ga bakalan bisa! Seandainya kamu ngupload gambar
yang namanya kucing.jpg, maka ganti saja src="http://www.freewebs.com/kucing.jpg&quot;

width="1024" height="768" = Width adalah panjang gambar, height adalah tinggi
gambar. Ubah saja angkanya semau kamu.

NAH, Sekarang gimana caranya supaya tu gambar bisa di klik en jadi link? gampang!
Skarang buka [NORMAL] dan klik kanan gambar tersebut dan pilih "hyperlink" dan
masukkan alamat tempat pengunjung KITA AKAN LONCAT BILA MENGKLIK gambar
tersebut. Umpamakan saja bahwa link itu merupakan sambungan ke file html yang
telah kita upload di domain kita, yang file itu sendiri bernama kuda dengan
alamatnya http://www.geocities.com/1234/kuda.html

Masukkanlah http://www.geocities.com/1234/kuda.html ke box hyperlink tersebut,
klik ok, dan pindahlah ke bagian [HTML]

Dan kamu akan menemukan kode berikut :

<p><a href="http://www.geocities.com/1234/kuda.html"&gt;
<img border="0" src="http://www.freewebs.com/lk.jpg&quot; width="90"
height="97"></a></p>

Kamu bodoh abiss kalo ampe ga ngerti kode ini…."

Q : "OHHHH!yayayayayayayaaa!!!! Saya ngerti Master Claw! Saya Ngerti!
Wahahahahahahahaa!!!!

A : "Skarang coba kamu tulis kata "master of epinium" tanpa tanda kutip,
kemudian pilih font arial, tebelin pake bold(B), miringin pake italic(I), dan
garis bawahi pake underline(U) seperti yang biasa kamu lakukan kalo pake
microsoft word. Setelah itu ukurannya, pilih yang 3(12pt) dan buka [HTML] maka
kamu akan menemukan code berikut :

<p><u><i><b><font face="Arial">master of epinium</font></b></i></u></p>

<p> = page
<u> = Underline
<i> = Italic
<b> = Bold
<font face="Arial"> = jenis font yang kamu gunakan

Bisa dimengerti?

A : "Yep! Mengerti dengan cermat sekali!"

Q : "Bagus. Kalo begitu sampe sini dulu tutorial html saya yah, selebihnya kamu
coba coba ndiri. Soalnya kalo noyoba ndiri pake frontpage, kamu bakalan lebih
mudah ngerti ketimbang saya jelasin. Pengalaman sendiri lebih berharga. Oke!
Good luck! Kalo ada masalah, segera tanya aja ke saya. kalo kamu udah agak
lancar, kamu boleh lanjut ke bagian bonus knowledge! Akhir kata, MAY THE FORCE
WITH YOU, MY YOUNG PADAWAN…"


Responses

  1. Kok gw tambah bingung yah??? hehehe…

    Like

  2. Loh …
    namanya kaya nama gw

    Like

  3. bagaimana caranya berkenalan dimana saja

    Mungkin anda tahu..cara yg umum seperti ini
    a: hai..boleh kenalan ga..??
    atau eh kamu cantik dech..nama mu siapa??

    jangan sekali-kali memulai percakapan dgn seperti itu, karena dia akan bt dan bosan mendengarnya.
    apalagi wanita cantik sudah sering mendengar itu.

    lalu bagaimana caranya yg tepat..
    jawabannya tidak bisa dibeberkan disini.
    klik saja http://www.sangatpenting.com

    semoga berguna

    Like

  4. hmmm
    kalo hosting di geocities, udah pada tahu belom
    suka ada frame di sebelah kanan yang mengganggu?
    kalo gasalah itu adalah iklan internalnya
    geocities khan?

    untuk ngilanginnya
    kunjungi
    http://www.geocities.com/noGeoAds

    Like

  5. mau buku panduan cara membuat situs yang mudah serta gampang silahkan kirim email ke tnasatulakbar@yahoo.com.thank.

    Like

  6. sayah ko jadi tambah mabuk ya!! -_-

    Like

  7. lholholho akang???? uda upload ni halamannya ya tapi gambarnya g muncul gmn nieh

    Like


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: