Belajar Bikin Homepage |
Bikin Dokumen HTML Agri belajar sendiri dalam pembuatan homepage ini, HTML Editor yang Agri 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 Agri udah mengerti cara mengolah dokumen HTML, Agri mempelajari cara mengedit HTML Tag. Dalam hal ini, Agri 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, Agri bingung juga gimana sih bikin frame itu. Setelah masuk ke beberapa homepage yang ada framenya, Agri 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> |
Mau contoh yang lain?! Silakan liat PAGE SOURCE pada beberapa halaman homepage Agri yang menggunakan JAVASCRIPT. Atau cari aja CGI Script GRATIS yang banyak tersedia di internet lewat search engine GoTo.com dibawah ini. |
Pengantar |
Belajar Bikin Homepage | Materi Homepage |
Copyright © 1998 by M. Agri Winata