Saya belajar sendiri dalam pembuatan homepage ini, HTML Editor yang saya gunakan adalah Internet Assistants for Microsoft Word. Ternyata caranya gampang sekali, hampir sama seperti kita membuat dokumen MS Word. Tapi, jika anda udah punya HTML Editor seperti Netscape Composer, Microsoft FrontPage, HTMLed, HotDog, WebFactory, dsb, gunakan program itu aja. Sepertinya sama aja kok, yang penting bisa kita gunakan untuk membuat dokumen HTML. Silakan dicoba dulu untuk membuat halaman HTML yang sederhana. Minimal anda pelajari dan mengetahui gimana mengatur warna background/memasukkan gambar background, gimana memasukkan dan mengatur gambar GIF/JPG, gimana membuat link/sambungan ke halaman atau homepage lainnya (baik link pada gambar maupun text), dan mengatur huruf/font.
Setelah saya udah mengerti cara mengolah dokumen HTML, saya mempelajari cara mengedit HTML Tag. Dalam hal ini, saya menggunakan program Microsoft ActiveX Control Pad. Anda bisa lihat HTML Tag suatu homepage dengan meng-klik View Source (pada Internet Explorer) atau View Page Source (pada Netscape Navigator), nanti anda akan liat gimana HTML Tag itu, contohnya seperti ini nih:
| <HTML> <HEAD> <TITLE>Judulnya Apa</TITLE> </HEAD> <BODY BGCOLOR="#ffffff" BACKGROUND="gambar_apa.jpg"> <P> <CENTER><IMG SRC="dia.jpg" ALT="Ini Gambar Si Dia" ALIGN="LEFT"></CENTER> <B><FONT SIZE=4 FACE="Arial">Tulis disini apa yang ingin disampaikan</FONT></B> <HR> <CENTER><FONT SIZE=2 FACE="Verdana">Kirim e-mail ke<A HREF="mailto: saya@mail.com">saya@mail.com</A> atau <A HREF="isi.html">isi guestbook</A></FONT></CENTER> </BODY> </HTML> |
| Apabila anda mau mempelajari lebih detil tentang HTML Tag, klik ini. Silakan pelajari dan sorry Agri nggak sanggup menerjemahkannya kedalam bahasa Indonesia, hehe... Itu dokumen diambil dari HELP-nya Microsoft ActiveX Control Pad. Kalo anda udah mengerti HTML Tag, anda bisa mengedit homepage dengan menggunakan Microsoft ActiveX Control Pad, bahkan pake Notepad juga bisa, asal anda save dalam format html. Dan yang lebih penting, anda bisa dengan cepat memperbaiki kesalahan-kesalahan kecil. |
| Bikin Frame Sayangnya, program Internet Assistants for Microsoft Word ini nggak bisa digunakan untuk membuat FRAME. Waktu mula-mula belajar bikin homepage, saya bingung juga gimana sih bikin frame itu. Setelah masuk ke beberapa homepage yang ada framenya, saya liat aja Page Source-nya, terus dicopy kemudian dipelajari dan ternyata cukup gampang. Berikut ini contoh FRAME, HTML Tag-nya begini: |
| <html> <head> <title>Contoh Frame</title> </head> <frameset rows="19%,81%" frameborder=0 framespacing=0 border=0> <frame src="head.html" name="atas" scrolling=no bordercolor="red"> <frameset cols="20%,80%"> <frame src="menu.html" name="menu" bordercolor="red" scrolling=yes> <frame src="welcome.html" name="utama" bordercolor="red"> </frameset> </frameset> <noframes> <body> <p> <font face="Verdana">Sorry,you can not view FRAME version of my homepage, for No Frame version <a href="no_frame.html">CLICK HERE</a>.</font> </body> </noframes> </html> |
Silakan pelajari lalu coba untuk diterapkan, tulisan yang pake huruf merah itu bisa diubah/dimodifikasi sesuai keinginan. Jika udah ngerti dasar-dasarnya, mau bikin frame model apa aja, gampang deh... Yang mesti diingat adalah setiap frame harus ada namanya, kalo anda buat link di frame kiri dan ingin dibuka pada frame utama, maka jangan lupa menuliskan target-nya. Misalnya, pada frame menu Agri buat link sebagai berikut: <a href="myself.html" target="utama"><img src="About_Agri.jpg" border=0></a> Jika kita klik gambar About Agri, maka halaman myself.html akan terbuka di frame utama. Kalo targetnya diganti menjadi target="atas", maka halaman myself.html-nya malah terbuka di frame atas. Silakan anda coba mengganti target tersebut dengan "_top" dan "blank", anda akan liat gimana perbedaannya. Catatan:Tag yang berhuruf merah muda, yakni frameborder=0 framespacing=0 border=0, bisa kita hapus kalau ingin frame kita kelihatan ada bordernya yang berwarna merah. |
| Memasukkan Script Kedalam Dokumen HTML Anda bisa melengkapi dokumen HTML anda dengan SCRIPT (JAVASCRIPT) misalnya tulisan berjalan, jam, window alert, gambar yang berubah ketika terkena pointer mouse, dll. Berikut adalah beberapa contoh SCRIPT, silakan copy dan paste kedalam salah satu dokumen HTML anda setelah Tag <BODY>. |
SCRIPT untuk 'tulisan berjalan'
| <SCRIPT LANGUAGE="JavaScript"><!-- Start of scroller script var scrollCounter = 0; var scrollText = "Selamat Datang di Homepage Aye"; var scrollDelay = 70; var i = 0; while (i ++ < 140) scrollText = " " + scrollText; function Scroller() { window.status = scrollText.substring(scrollCounter++, scrollText.length); if (scrollCounter == scrollText.length) scrollCounter = 0; setTimeout("Scroller()", scrollDelay); } Scroller(); // End of scroller script --> </SCRIPT> |
SCRIPT untuk 'window alert'
| <script> alert("\nHalo, selamat datang di hommie aye. Makasih atas kesediaannya mampir kemari. Jangan lupa ngisi bukutamu-nya yach?!\n") </script> |
SCRIPT untuk 'window alert pilihan'
| <SCRIPT LANGUAGE="LiveScript"><!--function choose(){if (!confirm ("Klik OK kalo mau liat, klik Cancel kalo nggak mau liat.")) window.location.href="http://www.agri-winata.com/cancel.html"; ;return " "} document.writeln(choose())<!--End--></SCRIPT> |
No comments:
Post a Comment