Wednesday, August 15, 2007

TUTORIAL MEMBUAT SITE (Course 2)

August 15, 2007    1 comment

COURSE 2. BELAJAR HTML? YEAH!

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

A : "Cotto..! Cotto matte~ne...!!! Sebelumnya, lo 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 lo." Normalnya, huruf tersebut akan menjadi biru dan bergaris bawah. Setelah itu, lo klik [html]. maka akan ada kode berikut :

<p><a href="http://www.geocities.com/1234/matrix.html";>
http://www.geocities.com/1234/matrix.html</a> </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";>
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 gue, kodenya seperti ini :

<p><a href="http://www.geocities.com/1234/kentut.html";>
kentut gue</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"; 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"; = 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";

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



NAH, Sekarang gimana caranya supaya tu gambar bisa di klik en jadi link? gampang! Skarang buka [NORMAL] dan klik kanan gambar tersebut dan pilih "hyeperlink" 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";>
<img border="0" src="http://www.freewebs.com/lk.jpg"; width="90" height="97"></a></p>


Lo 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 gue yah, selebihnya lo coba coba ndiri. Soalnya kalo noyoba ndiri pake frontpage, lo bakalan lebih mudah ngerti ketimbang gue jelasin. Pengalaman sendiri lebih berharga. Oke! Good luck! Kalo ada masalah, segera tanya aja ke gue. kalo lo udah agak lancar, lo boleh lanjut ke bagian bonus knowledge! Akhir kata, MAY THE FORCE WITH YOU, MY YOUNG PADAWAN..."

1 Comments:

Ihot Trading said...

Thanks bos, akuk dah baca tutorial buat webnya. itu menarik dan sederhana, trus kursus 3 nya kapan? thank

May 6, 2008 at 4:37 PM

Post a Comment