materi web desain
DESCRIPTION
materi web desainTRANSCRIPT
(Bagi Peserta Pelatihan Guru-guru SMA Se-Sumatera Barat)
Instruktur
Alexandri, S.Kom
Staf Pengajar Fakultas Ilmu Komputer (Filkom)
Universitas Putra Indonesia “YPTK”
Modul-1
DASAR-DASAR BELAJAR HTML
Pendahuluan Pertama-tama, anda akan mendapati bahwa belajar membuat homepage (lebih tepat kalau saya katakan web page) tidaklah sulit. Sangat sederhana bahkan. (Untuk selanjutnya saya akan gunakan istilah web page, tampilan yang anda lihat di browser waktu menjelajah web, seperti yang anda baca sekarang. Tampilan ini biasanya merupakan gabungan tulisan, gambar, dan bisa dilengkapi dengan suara, animasi dan lain-lain. Saya belum menemukan padanan bahasa Indonesianya yang cocok dan enak di telinga.) Web page pada dasarnya adalah sebuah file, file HTML persisnya. Disebut demikian karena file ini berakhiran .htm atau .html. HTML adalah singkatan dari Hyper Text Mark-up Language. Mari kita mulai. Jika saat ini anda mempunyai program khusus untuk membuat file HTML, yang katanya mampu membuat web page secara mudah, lupakan saja. Cara paling jelek untuk belajar adalah menggunakan salah satu dari program-program ini. (Walaupun ada di antaranya yang bisa sedikit membantu, program-program tersebut baru akan bermanfaat jika anda sudah mempelajari dasarnya. Jadi tidak usah dipikirkan dulu saat ini.) Lalu program apa yang paling baik digunakan untuk belajar HTML? Notepad. Program pengolah kata kecil dan sederhana itu? Yang selalu ada kalau kita menginstall Windows? Ya dan ya. Tapi anda punya program besar, kompleks, dan canggih yang mampu menghasilkan web page cukup dengan mengetik dan kemudian klik sana klik sini. Untuk yang satu ini percayalah pada saya. OK? OK. Program lain yang anda butuhkan adalah browser untuk menampilkan web page yang anda hasilkan. Dua nama yang paling populer adalah Netscape Navigator dan Internet Explorer. Keduanya memiliki kelebihan dan kekurangan, tapi secara pribadi saya lebih menyukai yang pertama (oleh karena itu saya tuliskan lebih dulu). Bukan apa-apa, mungkin saya mulai bosan melihat nama dan logo Microsoft di mana-mana. Anda boleh saja menggunakan Internet Explorer, tapi terus terang tulisan ini saya buat dan tes dengan Netscape Navigator (browser ini dilengkapi dengan editor). Kalau anda menggunakan browser lain (adakah yang lain?), saya tidak bisa berkomentar. Saya tidak pernah menggunakannya. x
Dengan kedua program tadi di komputer anda, bersiap-siaplah. Saya yakin bahwa dalam waktu kurang dari lima menit lagi anda akan menghasilkan web page anda yang pertama! Buka Notepad.... dan kita beralih ke Pelajaran 1.
Materi 1 Anda sudah buka Notepad? Dibawah ini adalah tampilan sederhana notepad
Mulailah dengan menuliskan ini....
<HTML>
</HTML>
Masing-masing baris di atas disebut tag (sekali lagi kita pakai istilah aslinya). Ada tag pembuka
dan ada tag penutup. Untuk menuliskan tag penutup cukup tambahkan / di depan tag pembuka.
Sebagian besar, tapi tidak semua, tag memiliki tag penutup. Anggaplah tag ini sebagai cara kita
berbicara dengan browser, atau lebih tepat memberikan perintah. Yang baru saja anda katakan
pada browser adalah "ini adalah awal dokumen HTML" (<HTML>) dan "ini adalah akhir
dokumen HTML" (</HTML>). Sekarang kita perlu mengisinya dengan sesuatu
Setiap file HTML memerlukan pasangan tag HEAD.
<HTML>
<HEAD>
</HEAD>
</HTML>
Satu-satunya yang harus kita pikirkan tentang isi tag HEAD (untuk saat ini) adalah TITLE.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>
Dan isi sesungguhnya dari file tersebut akan kita tempatkan di antara tag BODY.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Oh, dan satu hal lagi, beri judul pada file anda.
<HTML>
<HEAD>
<TITLE>Web page saya yang pertama!</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Sekarang simpanlah file tersebut, bukan sebagai file teks (.txt), tetapi sebagai file html. Simpan
dengan nama hal1.html di suatu folder baru. Kalau anda bingung bagaimana melakukannya,
inilah yang harus anda lakukan.... Di window Notepad klik File kemudian Save As.
Anda akan menghadapi dialog box. Buat folder baru dengan menekan ini ->
Beri nama apa saja. Kemudian klik dua kali untuk membukanya. Di kotak File name: tuliskan
hal1.html Pada kotak Save as type: pastikan bahwa jenis file ini adalah All Files (*.*)
Kemudian tekan tombol Enter!
Selamat! Anda patut berbangga karena mulai sekarang anda termasuk satu dari sedikit orang
yang mampu membuat web page! Anda bisa menempatkannya di salah satu server internet dan
seluruh dunia dapat melihat kreasi anda tersebut!
Anda dapat meng-klik dua kali file tersebut dan melihat hasil karya anda.
Ini adalah tampilan hasilnya :
Tugas anda berikutnya nanti adalah mengisi halaman tersebut dengan beberapa hal.
Cara terbaik untuk mengikuti tutorial ini adalah membuka Notepad dan dua window Netscape.
Window Netscape yang pertama berisi tutorial ini dan yang satunya menampilkan web page
yang anda buat. Anda dapat berpindah-pindah dengan meng-klik salah satu dari ketiganya. Jika
anda sedang membaca tutorial ini di Netscape, anda dapat membuka window kedua dengan satu
dari dua cara ini- 1) Klik dua kali pada file hal1.html yang baru saja anda buat. Atau 2) Di
Netscape, klik File/Open File In Browser dan cari file tadi (hal1.html).
Dua hal penting perlu saya kemukakan sebelum kita beralih ke pelajaran 2. Pertama, apa yang
sudah anda buat adalah tipikal dokumen HTML. Ini adalah informasi minimum yang
diperlukan oleh dokumen web, dan semua dokumen web harus berisi komponen-komponen
dasar ini. Dan kedua, judul dokumen adalah apa yang tampak di bagian paling atas browser
anda.
Materi 2
Untuk memudahkan dan memperjelas, mulai sekarang saya hanya akan menuliskan apa yang
ada di antara tag <BODY>. Saya tidak akan menuliskan tag <HTML>, <HEAD> & <TITLE>. Tentu
saja anda harus tetap menuliskannya di dalam dokumen anda. <BODY>
</BODY>
Tuliskan sesuatu yang menarik. <BODY>
Sesuatu yang menarik
</BODY>
Sesuatu yang menarik
Setiap kali anda mengubah dokumen anda, simpanlah, kemudian tekan tombol Reload di
browser anda untuk menampilkan perubahan tersebut. Kadang-kadang cara ini kurang
berhasil.... untuk itu tekan tombol Reload sambil menekan tombol SHIFT.
Saya pikir hal pertama yang akan kita pelajari adalah cara mengubah warna latar belakang
browser. <BODY BGCOLOR="#CCFFCC">
Sesuatu yang menarik
</BODY>
Sesuatu yang menarik
CCFFCC adalah kode untuk warna hijau muda. Masih ada beberapa lagi.
Dalam mode 256 warna, Netscape menampilkan segala sesuatu sesuai warna-warna ini. Jika warna latar
belakang yang kita gunakan bukan salah satu dari ini, Netscape biasanya akan memilih warna terdekat.
Anda dapat juga menggunakan gambar sebagai latar belakang. (Ingat, file gambar tersebut harus berada
pada direktori yang sama dengan file HTML anda. Ini akan kita bahas lagi nanti.) <BODY BACKGROUND="swirlies.gif">
Sesuatu yang menarik
</BODY>
Inilah gambar latar belakangnya.
Agar gambar tadi bisa tampil, browser harus dapat menemukannya. Untuk saat ini, kita ingin
menempatkannya di direktori yang sama dengan file HTML anda (hal1.html). Cara termudah
untuk itu adalah dengan meng-klik kanan gambar di atas dan memilih Save Image As (kurang
lebih seperti itu). Cari direktori yang berisi hal1.html dan simpan gambar tersebut di sana. Nanti
kita akan membahas hal ini lebih rinci lagi.
Rasanya sangat jelas bahwa gambar kecil di atas ditampilkan bersusun/berulang sehingga
memenuhi seluruh browser (tiled, seperti memasang keramik). Jika anda menggunakan gambar
kecil yang panjang, anda akan mendapatkan efek seperti ini....
<BODY BACKGROUND="bluebar.gif">
Sesuatu yang menarik
</BODY>
(Ukuran sebenarnya 1700x4, tetapi saya ubah menjadi 564x4 agar bisa tampil utuh di layar)
Satu jenis teks yang sangat berguna adalah mono-spaced font, atau Typewriter Text. <BODY>
<TT>Sesuatu yang menarik</TT>
</BODY>
Ini adalah jenis teks biasa ->
iiiiiiiiii
oooooooooo
mmmmmmmmmm
Ini adalah jenis mono-space ->
iiiiiiiiii
oooooooooo mmmmmmmmmm
<BODY>
Sesuatu yang <FONT>menarik</FONT>
</BODY>
Kemudian tentukan SIZE (ukuran)-nya. <BODY>
Sesuatu yang <FONT SIZE=6>menarik</FONT>
</BODY>
sangat kecil kecil normal agak besar besar besar sekali
& besarnya! 1 2 3 4 5 6 7
Ada 2 hal yang ingin saya kemukakan. Pertama, <TAG> adalah perintah pada browser untuk
melakukan sesuatu. ATTRIBUTE dituliskan di dalam <TAG> dan menjelaskan bagaimana
melakukannya.
Yang kedua adalah nilai bawaan (default). Seperti yang mungkin sudah anda ketahui, nilai
default adalah nilai bawaan yang digunakan oleh browser jika anda tidak menyatakan lain.
Contoh yang baik adalah ukuran font. Nilai default yang dipakai untuk font adalah 3
(umumnya). Kalau anda tidak menyatakan lain, nilai yang digunakan adalah 3. Jika anda
menuliskan huruf di komputer anda, ukurannya tetap 3.
Setiap browser memiliki default font setting - jenis font, ukuran dan warnanya. Kecuali anda
sudah mengubahnya, defaultnya kemungkinan Times New Roman 12pt (yang sama dengan
nilai 3 untuk kita) dan warnanya hitam. Tentu saja kita bisa menggunakan jenis font selain nilai
default tadi. Seperti ARIAL dan COMIC SANS.
<BODY>
Sesuatu yang <FONT FACE="ARIAL">menarik</FONT>
</BODY>
Font tersebut hanya akan ditampilkan bila mereka yang melihat web page anda
sudah menginstall font tadi di komputernya. Saya ulangi.... Kalau mereka tidak
menginstall font yang anda maksud di komputernya, mereka hanya akan melihat font
defaultnya. Jadi hati-hatilah dalam penggunaan font anda. Arial dan Comic Sans MS
adalah font yang hampir pasti ada karena merupakan bawaan Windows. Begitu juga
Impact!. Anda dapat lebih menjamin amannya pilihan anda dengan
menggunakan lebih dari satu font. (Ya! Anda dapat melakukannya!). Tuliskan saja
seperti ini.... <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Hai...
Halo</FONT>.
Kalau anda seperti saya yang tidak bisa langsung mengerti, inilah yang terjadi-
Browser mencari font ARIAL. Kalau ada, itu yang dipakai. Jika tidak, browser
mencari HELVETICA. Kalau font ini tidak ditemukan, pencarian diteruskan ke
LUCIDA SANS. Dan jika font itu pun tidak ditemukan, browser akan menggunakan
font default.
Font apa saja yang umum dan sangat aman untuk dijadikan pilihan?
Andale Mono Arial Arial Black
Comic Sans MS Courier New Georgia Impact
Times Rew Roman Trebuchet MS Verdana
Untuk melihat bagaimana font-font tersebut ditampilkan di browser anda, bisa anda
coba menggunakan Font Viewer.
menggunakan Font Viewer.
Saya rasa sekarang adalah saat yang tepat untuk bicara tentang cara
penulisan. Anda perhatikan bahwa di sana sini saya menggunakan tanda
petik, ini penting. Anda mungkin tidak bisa membayangkan berapa kali
saya membuat web page dan kemudian semuanya kacau balau.... Maksud
saya semuanya benar-benar jadi kacau balau karena kurang atau salah
penempatan satu tanda petik atau kurang satu spasi atau kurang satu tanda
lebih besar >. Suatu hari nanti kita tidak harus dipusingkan lagi oleh tanda-
tanda ini, tapi untuk saat ini kita hanya perlu berhati-hati dalam
penulisannya. Berikutnya adalah pemakaian HURUF BESAR (CAPITAL)
untuk menuliskan tag. Ini hanya masalah kebiasaan saja, bukan keharusan.
Saya pikir tag akan lebih jelas kalau dituliskan dalam huruf besar
semuanya. Anda bisa saja menuliskan <font> dan bukannya <FONT>.
Bahkan tidak ada yang melarang kalau anda lebih memilih <fOnT>.
Baiklah, sekarang kembali ke masalah kita....
Anda bisa mengubah warna font kalau anda mau.
<H1>Sesuatu yang menarik<H1> <H2>Sesuatu yang menarik<H2> <H3>Sesuatu yang menarik<H3> <H4>Sesuatu yang menarik<H4> <H5>Sesuatu yang menarik<H5> <H6>Sesuatu yang menarik<H6>
Sesuatu yang menarik Sesuatu yang menarik Sesuatu yang menarik Sesuatu yang menarik Sesuatu yang menarik Sesuatu yang menarik
Atribut yang bermanfaat dalam tag heading adalah
ALIGN... untuk menentukan letaknya. <H2 ALIGN="left">Sesuatu yang menarik<H2>
<H2 ALIGN="center">Sesuatu yang menarik<H2>
<H2 ALIGN="right">Sesuatu yang menarik<H2>
Sesuatu yang menarik
Sesuatu yang menarik
Sesuatu yang menarik
Anda dapat mengubah default suatu dokumen pada tag <BODY>. <BODY BGCOLOR="#00000" TEXT="#FFFF66" LINK="#00FF66"
VLINK="#00BB33" ALINK="#00CCFF">
Sesuatu yang menarik
</BODY>
Satu hal lagi dan kita akan sudahi pelajaran ini. Browser memiliki nilai default
untuk warna teks, warna link, warna active link dan warna visited link selain warna
latar belakang. Defaultnya adalah....
Teks biasanya hitam
Link biasanya biru
Active link umumnya merah
Visited link biasanya ungu
Anda bisa mengubahnya kalau perlu (perhatikan, saya mengatakan kalau perlu).
Seluruh dunia terbiasa dengan warna biru untuk link. Mengapa harus
membingungkan diri sendiri?
Saya tahu bahwa kita belum belajar bagaimana membuat link, jadi informasi
tersebut tidak saya tuliskan di atas (kenapa pusing-pusing sekarang?) Ini hanya
untuk menunjukkan cara mengubah warna sehingga anda sudah siap pada saat
belajar membuat link.
Bisa anda lihat bahwa warna latar belakang hitam dan teksnya kuning.
Linknya berwarna hijau muda
Visited link warnanya hijau
Dan active link berwarna biru langit.
Nah! Sekarang anda tahu apa yang harus dilakukan untuk mengubah tampilan teks dalam dokumen anda.
Anda bisa membuat Tulisan merah besar atau tulisan kecil tebal. Anda dapat juga menggunakan Font
lain, atau font monospace. Bahkan anda dapat membuat rollercoaster!
(Cara membuat roller coaster ada di sini kalau anda mau melihatnya.)
Sebelum kita akhiri pelajaran ini, ada satu hal kecil yang ingin saya kemukakan. Anda dapat melihat kode
HTML (source) setiap halaman yang sedang anda amati dengan cara memilih View/Document Source pada
browser anda. Perintah pada browser anda mungkin sedikit berbeda, tetapi hampir semua browser memiliki
fasilitas ini. Jadi pada saat anda menjelajah internet dan menemukan web page yang menarik, dan anda
berfikir "Gimana sih membuatnya?", jawabannya bisa anda dapatkan dengan beberapa kali klik saja.
Materi 3 Kita akan mulai dengan mempelajari sesuatu tentang cara kerja browser.
Pertama-tama kita lihat contoh berikut....
Browser anda tidak mengenal pengaturan letak. Kecuali anda menuliskan
perintahnya, browser menampilkan tulisan tersebut secara berurutan
memanjang. Jika anda ingin menuliskannya di baris baru, anda harus
menggunakan perintah ganti baris.
<BODY>
He! <BR>
Jadinya
<BR>
Kok
<BR>
Seperti
<BR>
ini??
</BODY>
He!
Jadinya
kok
seperti
ini??
<BODY><P ALIGN="left">Sesuatu yang menarik</P><P ALIGN="center">seperti
tangan</P><P ALIGN="right">atau tali</P><P ALIGN="left">Sesuatu yang
menarik<BR>seperti tangan<BR>atau tali</P><P ALIGN="center">Sesuatu yang
menarik<BR>seperti tangan<BR>atau tali</P><P ALIGN="right">Sesuatu yang
menarik<BR>seperti tangan<BR>atau tali</P></BODY>
Sesuatu yang menarik
seperti tangan
atau tali
Sesuatu yang menarik
seperti tangan
atau tali
Sesuatu yang menarik
seperti tangan
Tanda & berarti awal suatu karakter khusus. Tanda ; berarti akhir karakter khusus tadi dan huruf-huruf di
antaranya adalah semacam singkatan yang menunjukkan fungsinya. Hanya sedikit karakter yang tergolong
khusus. Ada 6 lagi yang perlu anda tahu. (Catatan- semuanya harus dituliskan dengan huruf kecil)
non-breaking space (spasi)
< < less-than symbol (tanda lebih kecil)
> > greater-than symbol (tanda lebih besar)
& & ampersand (dan)
" " quotation mark (tanda petik)
­ soft hyphen (tanda sambung) Anda tidak harus menggunakannya setiap saat, hanya kalau dengan menuliskan karakter aslinya browser menjadi
bingung. Bagaimana anda tahu kalau itu terjadi? Tidak ada 'aturan' pasti yang bisa saya kemukakan. Hal itu
akan anda ketahui dengan sedikit latihan dan beberapa kali kesalahan.
Ngomong-ngomong, ada beberapa hal tentang membuat kesalahan dan mengacaubalaukan. Sebagian orang
beranggapan bahwa membuat kesalahan itu jelek. Mereka tidak berani mencoba sesuatu yang baru karena
takut akan mengacaukan semuanya. Melakukan kesalahan yang sama berulang-ulang memang sedikit bodoh.
Tetapi, khususnya pada saat anda belajar, jangan takut untuk mengacaukan hasil kerja anda. Kesalahan adalah
teman kita :-) Jika anda tidak pernah mengacaukan sesuatu berarti anda tidak belajar apapun dan
kemungkinan tidak melakukan apapun. Ingat, mengacaukan hasil kerja adalah bagian yang sah dan sangat
bisa diterima dari proses belajar!
OK, cukup ngecapnya. Masih ada lagi beberapa karakter khusus. Kemungkinan anda tidak akan pernah
menggunakannya, tetapi saya ingin anda tahu bahwa karakter-karakter tersebut ada.
Mari kita pelajari beberapa hal terakhir ini secara cepat karena jika anda seperti saya, ini akan memusingkan.
Browser akan menampilkan apapun yang anda tuliskan secara berurutan kecuali anda mengubahnya dengan
perintah membuat baris baru dsb. Browser akan mengurangi berapapun karakter kosong menjadi hanya 1
spasi. Kalau anda mau lebih dari satu spasi, anda harus gunakan kode spasi ( ). Sebetulnya masih ada
beberapa hal kecil yang belum kita bahas.... Kalau anda menekan tombol Return (atau Enter) pada saat anda
mengetik, sebagian besar browser akan menganggapnya sebagai spasi.... kecuali sudah ada spasi di sana.
Materi 4
Mari kita coba menambahkan gambar di halaman yang kita buat. Kita akan menggunakan gambar di bawah
ini. Sekali lagi, klik kanan dan simpan gambar tersebut atau copykan dari folder gambar.
Anda menyatakan pemakaian gambar dengan tag <IMG> (image). <BODY><IMG></BODY>
Kita juga harus menyebutkan sumber (nama dan tempat) serta ukurannya. <BODY>
<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101>
</BODY>
Tanya: Bagaimana saya tahu ukuran (WIDTH dan HEIGHT) suatu gambar?
Jawab: Ada beberapa cara. Salah satunya dengan membuka gambar tadi
menggunakan graphics viewer/editor. Viewer yang handal (dan gratis) adalah Irfan
View. Sedangkan graphics editor yang sangat populer adalah Paint Shop Pro.
Program ini adalah shareware (coba dulu bayar nanti, kalau anda suka) dengan batas
waktu pemakaian tetapi merupakan editor yang bagus. Ada versi lamanya yang
sangat saya sarankan untuk web disainer pemula, dan versi ini tanpa batasan waktu.
Kalau mau, anda bisa dapatkan di sini.
Cara lainnya adalah menggunakan editor teks atau html yang menyertakan ukuran
file pada saat anda menyisipkannya. Salah satu program ini adalah NoteTab, yang
secara otomatis menuliskan tag yang diperlukan jika kita men-drag suatu file ke
dokumen yang sedang kita edit. Saya dapat menambahkan gambar dalam waktu
seperenam detik
SRC="chef.gif" berarti gambar tersebut ada di
folder yang sama dengan dokumen
htmlSRC="images/chef.gif" berarti gambar
tersebut terletak satu folder di bawah (sub folder)
dokumen html.
Anda bisa membuat sub-sub folder sebanyak yang
anda mau.SRC="../chef.gif" berarti gambar
tersebut terletak satu folder di atas dokumen
html.SRC="../../chef.gif" berarti gambar tersebut
terletak dua folder di atas dokumen
html.SRC="../images/chef.gif" berarti gambar
tersebut terletak satu folder di atas kemudian satu
folder ke bawah di direktori
images.SRC="../../../other/images/chef.gif" Saya
bahkan tidak akan mencoba mengutarakannya
dalam kata-kata.
Materi 5
Mari kita belajar tentang link.
Hal ini sebenarnya sederhana sekali. Kita akan membuat link ke
Yahoo.
Mulai dengan ini....
<BODY>
Lihat Yahoo!</BODY>
Lihat Yahoo!
Lihat Yahoo!
</BODY>
Lihat Yahoo!Kemudian tambahkan sepasang anchor tag.
<BODY>
Lihat <A>Yahoo!</A>
</BODY>
Lihat Yahoo!Tambahkan URL-nya dan selesailah sudah! URL adalah singkatan
dari Universal Resource Locator. Ini adalah istilah canggih yang diciptakan oleh
orang-orang komputer. Mereka memang punya kecenderungan untuk banyak
melakukan hal-hal seperti ini. URL sebenarnya adalah sekedar alamat saja.
<BODY>
Lihat <A HREF="http://www.yahoo.com/">Yahoo!</A>
</BODY>
Lihat Yahoo!Mari kita coba satu lagi.
<BODY>
Lihat PTS Online!
</BODY>
Materi 6 Sebelum kita lanjutkan, anda harus tahu tentang satu hal. Kalau
anda memakai gambar dalam dokumen anda, ingat bahwa
gambar tersebut berisi banyak sekali data dan karenanya butuh
cukup banyak waktu untuk menampilkannya. Satu cara untuk
mengurangi ukuran gambar (ukuran yang saya maksud adalah
Kb) adalah dengan memperkecil dimensinya. Mengurangi
panjang dan lebar gambar setengahnya akan menghasilkan
gambar yang berukuran hanya 1/4 ukuran aslinya. Anda dapat
juga mengurangi jumlah warna yang dipakai. Sebagai contoh:
Dimensi 310 x 304
jumlah warna- 238
Ukuran - 69 Kb
Dimensi 207 x 203
jumlah warna- 238
Ukuran - 34 Kb
Dimensi 207 x 203
jumlah warna- 48
Ukuran - 19 Kb
Semua pengeditan gambar dikerjakan dengan Paint Shop Pro.
(Versi sebelumnya yang tanpa batasan waktu pemakaian tersedia di sini.
Biarpun versi lama dan tidak secanggih versi terbaru, graphics editor ini
sangat bagus - cocok untuk para pemula.)
Sudah jelas, gambar pertama lebih besar, lebih bagus dan kualitasnya
lebih baik, tetapi bayangkan ini.... jika dokumen anda butuh waktu yang
sangat lama untuk tampil, pengunjung anda kemungkinan besar akan
berpindah halaman dan mereka tidak akan melihat apapun.
Pilihan lain yang dapat digunakan jika anda menggunakan banyak
gambar adalah dengan menyediakan thumbnail (gambar kecil) berisi link
ke gambar yang lebih besar. Misalkan saya ingin menampilkan tiga
gambar mobil dari beberapa koleksi mobil saya (I wish).
<BODY>
<IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62>
</BODY>
Tambahkan tag <A>.
<BODY>
<A><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A>
</BODY>
Kemudian tambahkan URL gambar besar dan selesailah sudah!
<BODY>
<A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A>
</BODY>
Kalau anda mau, anda bisa hilangkan garis biru di sekeliling gambar. Atau anda biarkan saja supaya orang tahu
bahwa gambar tersebut adalah sebuah link. Terserah anda.
<BODY>
<A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62 BORDER=0></A>
</BODY>
Materi 7
Membuat Tabel
Hai. Kali ini saya akan coba membahas cara membuat tabel untuk web page anda.
Bayangan anda tentang tabel barangkali tidak akan jauh dari ini. Tetapi kalau anda
pernah melihat beberapa web page yang menarik mungkin anda akan tertarik untuk
mempelajari bagaimana tag <TABLE> digunakan secara baik di sana! Sebagai
ilustrasi, inilah web page yang sama dengan latar belakang abu-abu dan BORDER-nya
diperlihatkan.
Pada dasarnya semua itu hanya memerlukan 3 tag...
<TABLE>
Tag utama. Digunakan untuk memberitahu browser "ini adalah tabel", bersama dengan
beberapa atribut seperti ukuran, lebar border dan beberapa hal lagi..
<TR>
TableRow menyatakan tiap baris dalam tabel yang merupakan jajaran <TD>
(TableData) sel.
<TD>
Menyatakan masing-masing blok atau sel pada setiap baris.
Jadi bisa kita katakan: Tabel terdiri dari baris yang merupakan susunan sel...
<--Ini--- --adalah-- --baris-- --sebuah-- ---tabel-->
sel
sel sel
Itulah tabel secara garis besar. Anda sekarang persiapkan diri untuk
membuat beberapa tabel!
Perlu saya tekankan bahwa kalau anda berkeinginan untuk membuat
dokumen html yang baik, maka anda harus menyediakan waktu untuk
mempelajari tag-tag yang bersangkutan. Kalau anda menggantungkan diri
pada fasilitas "table wizard" yang ada di dalam "editor html canggih yang
amat sangat mudah dipakai" yang banyak tersedia di pasaran, fleksibilitas
anda akan sangat terbatas. Dan hasil akhirnya mungkin tidak akan seperti
yang anda harapkan. Menurut pendapat saya, editor html terbaik untuk
dipakai adalah editor berbasis teks. Program-program ini akan
mempermudah penulisan dokumen html anda, tetapi tidak mengerjakannya
untuk anda.
Pelajaran 1 Seperti biasa, langkah pertama adalah membuka Notepad (ya, NOTEPAD!), dan ikuti
saya. Tuliskan baris-baris di bawah ini; atau lebih mudah gunakan "cut and paste" -
potong dan tempelkan - baris-baris tersebut.
<HTML>
<HEAD>
<TITLE>Membuat tabel</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Simpan dengan nama tabel1.html di suatu folder, misalnya tutorial. Folder ini juga
akan dipakai untuk menyimpan beberapa file yang lain, jadi sebaiknya dikhususkan
untuk itu. Buka browser anda (Netscape atau Internet Explorer) dan gunakan untuk
membuka file tabel1.html yang baru anda buat tadi. Jangan menutup Notepad!
Biarkan kedua program tersebut tetap di layar komputer. Dengan cara ini anda bisa
membuat tulisan anda di Notepad dan langsung melihat hasilnya dengan browser.
Lihat, anda tidak butuh "editor canggih yang amat sangat nudah dipakai" untuk
melakukannya. Cukup Notepad.
Mulailah membuat tabel anda dengan mengetikkan tag yang diperlukan. Tag ini berarti "awal tabel" dan "akhir tabel".
<HTML>
<HEAD>
<TITLE>Membuat tabel</TITLE>
</HEAD>
<BODY>
<TABLE>
</TABLE>
</BODY>
</HTML>
Setiap tabel membutuhkan paling tidak satu baris.
<HTML>
<HEAD>
<TITLE>Membuat tabel</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Dan tentu saja setiap tabel harus memiliki paling sedikit satu sel data.
<HTML>
<HEAD>
<TITLE>Membuat tabel</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Agar lebih mudah dan jelas, saya hanya akan menuliskan apa yang ada di
antara tag awal dan akhir tabel. Tag head, body, title, dll tidak saya tuliskan.
Tentu saja anda tetap membutuhkannya di dokumen anda.
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>
Sekarang anda perlu sesuatu untuk diisikan ke dalam sel. Bagaimana jika
Bram? Oke, masukkan Bram ke dalam <TD> sel.
<TABLE>
<TR>
<TD>Bram</TD>
</TR>
</TABLE>
Wow ....... anda telah menghasilkan tabel anda yang pertama! Bukalah
dengan browser dan lihatlah. Jika anda melakukan semuanya dengan benar,
tabel anda akan tampak seperti tabel berikut:
Bram
Becanda nih! Haha! Jangan marah ya, nggak usah dimasukkan hati. Inilah yang sebetulnya anda buat....
BramApapun juga, itu adalah tabel html! Berbanggalah!
Pelajaran 2
Oke, kita sudah membuat ini....
<TABLE>
<TR>
<TD>Bram</TD>
</TR>
</TABLE>
...yang menghasilkan ini:
BramPertama-tama mari kita buat agar lebih tampak seperti tabel dengan membuat garis batas. Setiap kali anda membuat perubahan dan ingin
melihat hasilnya, simpan dengan Notepad dan klik tombol Reload/Refresh pada browser anda.
<TABLE BORDER=1>
<TR>
<TD>Bram</TD>
</TR>
</TABLE>
BramMungkin anda ingin batas yang lebih besar?
<TABLE BORDER=5>
<TR>
<TD>Bram</TD>
</TR>
</TABLE>
Saya akan tunjukkan sesuatu yang lain kepada anda. Gambar juga dapat dipakai (dan
dimanipulasi) di dalam sel. Di dalam folder yang berisi file ini anda akan menemukan
gambar kecil dengan nama orang.gif. Copykan ke folder anda sendiri yang berisi file
tabel1.htm (tutorial, jika anda mengikuti saya sejak awal). Gantilah Bram dengan tag
IMG seperti di bawah ini.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="orang.gif" WIDTH=32
HEIGHT=32></TD>
</TR>
</TABLE>
Saya pikir ini adalah saat yang tepat untuk menekankan pentingnya penggunaan
ukuran dalam setiap gambar anda. Saya tidak akan berpanjang lebar, tapi hal itu akan
memudahkan browser dan menghindarkan anda dari kejutan-kejutan kecil yang tidak
menyenangkan.
Materi 8
Membuat Form
Hai. Saya akan menunjukkan bagaimana membuat web page yang bersifat interaktif dengan
penggunaan tag <FORM>. Dengan tag ini anda dapat membuat buku tamu, formulir pemesanan,
survey, meminta komentar atau apa pun di web site anda.
Pada dasarnya, form html mempunyai bentuk seperti ini....
<FORM> awal form
<INPUT> minta masukan menggunakan salah satu dari beberapa cara....
<INPUT> ....anda bisa gunakan berapa pun input yang anda inginkan
</FORM> akhir form
Itulah form html secara garis besar. Dengan ini anda siap membuat form untuk web site anda.
Perlu saya tekankan bahwa kalau anda berkeinginan untuk membuat dokumen html yang baik,
maka anda harus menyediakan waktu untuk mempelajari tag-tag yang bersangkutan. Kalau anda
menggantungkan diri pada fasilitas "table wizard" yang ada di dalam "editor html canggih yang
amat sangat mudah dipakai" yang banyak tersedia di pasaran, fleksibilitas anda akan sangat
terbatas. Dan hasil akhirnya mungkin tidak akan seperti yang anda harapkan. Menurut pendapat
saya, editor html terbaik untuk dipakai adalah editor berbasis teks. Program-program ini akan
mempermudah penulisan dokumen html anda, tetapi tidak mengerjakannya untuk anda.
Meskipun tutorial ini tidak dikhususkan untuk browser tertentu, tampilan yang anda lihat
mungkin sedikit berbeda tergantung browser yang anda pilih.
Pelajaran 1 Mulailah dengan membuka Notepad, kemudian copykan baris-baris di bawah ini:
<HTML> <HEAD> <TITLE>Membuat form html</TITLE> </HEAD> <BODY>
</BODY> </HTML>
Simpan dengan nama form1.html di folder khusus untuk itu. Buka browser anda (Netscape atau Internet Explorer), dan buka file form1.html tadi. Biarkan Notepad tetap terbuka sehingga apa yang anda tuliskan di situ bisa langsung anda lihat hasilnya di browser. Klik tombol Reload atau Refresh sesudah anda menyimpan perubahan yang anda lakukan di Notepad.
Tuliskan form anda.
<HTML> <HEAD> <TITLE>Membuat form html</TITLE> </HEAD> <BODY>
<FORM> </FORM>
</BODY> </HTML>
Selanjutnya browser harus mempunyai cara untuk mengirim data yang didapat kepada kita. Ada dua hal yang dapat anda lakukan: 1) anda dapat mengirim data tersebut ke suatu program/cgi script untuk diproses, atau 2) anda dapat meminta browser untuk mengirim data tersebut melalui email kepada anda. Cara pertama memerlukan pemahaman tentang pemrograman web yang ada di luar cakupan tutorial ini (saya akan coba jelaskan dalam tulisan-tulisan selanjutnya). Cara kedua, biasa disebut mailto form, memerlukan beberapa hal untuk ditambahkan dalam tag <FORM>.
<HTML> <HEAD> <TITLE>Membuat form html</TITLE> </HEAD> <BODY>
<FORM METHOD=POST ACTION="mailto:[email protected]" ENCTYPE="application/x-www-form-urlencoded"> </FORM>
</BODY> </HTML>
Baris ini sangat penting. Satu-satunya hal yang harus anda lakukan adalah menuliskan alamat
email anda sesudah mailto: Selebihnya harus anda tuliskan persis seperti di atas. Tulisan
FORM, METHOD, POST & ACTION tidak harus ditulis dalam huruf besar, tetapi harus ada
spasi di antara setiap atribut tadi... di antara FORM & METHOD, di antara POST & ACTION,
dan antara .xxx" & ENCTYPE.
Sayangnya, data yang akan anda terima masih dalam format komputer seperti ini...
NAMAFORM=Daftar+Anggota&NAMA=Bram+D.+Wardhana&ALAMAT=Jl.+Bali+No.+13
&KOTA=Semarang&Propinsi=Jawa+Tengah
Padahal yang anda inginkan adalah format yang lebih mudah kita pahami seperti ini...
NAMAFORM=Daftar Anggota
NAMA=Bram D. Wardhana
ALAMAT=Jl. Bali No. 13
KOTA=Semarang
PROPINSI=Jawa Tengah
Ada beberapa program yang dapat digunakan untuk mengubah format tersebut, misalnya
Mailto Formatter Program kecil ini sangat bagus dan bisa anda dapatkan secara gratis
(freeware) di internet.
Contoh di atas menunjukkan bahwa form html tidak lebih dari nama masukan (NAMA,
ALAMAT, dll) yang dipasangkan dengan nilai masukan (Bram D. Wardhana, Jl. Bali No. 13,
dll). Satu-satunya variabel adalah bagaimana cara kita mendapatkan data-data tersebut.
Pelajaran 2 Untuk memudahkan, mulai sekarang saya hanya akan menuliskan apa yang ada di antara tag
<FORM>. Saya tidak akan menuliskan tag head, body, title dan form itu sendiri. Sudah jelas
bahwa anda harus tetap menuliskannya di dalam dokumen anda.
Bentuk masukan (TYPE of <INPUT>) yang paling umum digunakan dalam form html adalah
TEXT.
<INPUT TYPE=TEXT>
Setiap masukan memerlukan nama (NAME).
<INPUT TYPE=TEXT NAME="ALAMAT">
Kalau anda mengetikkan alamat anda (misalkan Jl. Bali No. 13), alamat tersebut akan menjadi
nilai bagi input dan dipasangkan dengan ALAMAT sehingga hasil akhirnya setelah dijalankan
pada Mailto Formatter adalah ALAMAT=Jl. Bali No. 13.
Jika mau, anda bisa langsung menuliskan NILAI (VALUE) yang anda inginkan.
<INPUT TYPE=TEXT NAME="ALAMAT" VALUE="Jl. Lombok No. 31">
Maka ALAMAT secara otomatis akan langsung diberi nilai Jl. Lombok No. 31, kecuali anda
mengubahnya.
Catatan - Pastikan pemakaian tanda petik seperti yang saya tuliskan di atas.
Kita dapat juga menentukan panjang kotak masukan.
<INPUT TYPE=TEXT NAME="ALAMAT" VALUE="Jl. Lombok No. 31" SIZE=10>
<INPUT TYPE=TEXT NAME="ALAMAT" VALUE="Jl. Lombok No. 31" SIZE=20>
<INPUT TYPE=TEXT NAME="ALAMAT" VALUE="Jl. Lombok No. 31" SIZE=30>
Pelajaran 3 Selanjutnya adalah Radio Buttons dan Check Boxes. Radio Buttons memungkinkan
kita memilih satu dari beberapa pilihan. Check Boxes memungkinkan kita memilih satu atau lebih atau semua pilihan. Pertama-tama kita lihat Radio Buttons.
<INPUT TYPE=RADIO NAME="TEMAN BAIK">
Tambahkan 2 lagi.
<INPUT TYPE=RADIO NAME="TEMAN BAIK"> <INPUT TYPE=RADIO NAME="TEMAN BAIK"> <INPUT TYPE=RADIO NAME="TEMAN BAIK">
Hmmm... saya pikir kita perlu memberi baris baru untuk mereka masing-masing.
<INPUT TYPE=RADIO NAME="TEMAN BAIK"><BR> <INPUT TYPE=RADIO NAME="TEMAN BAIK"><BR> <INPUT TYPE=RADIO NAME="TEMAN BAIK"><P>
Perhatikan bahwa setiap masukan menggunakan nama yang sama. Alasannya akan segera tampak berikut ini.
Setiap Radio Buttons harus diberi VALUE.
<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Ed"><BR> <INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Rick"><BR> <INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Tom"><P>
Catatan - Untuk Check Boxes NAME yang dipakai harus berbeda, tetapi VALUE nya tetap. Sedangkan untuk Radio Buttons VALUE berbeda tetapi NAME nya tetap. Jangan frustasi, saya sendiri sering merasa bingung. Itulah sebabnya saya sangat mengandalkan catatan/referensi tentang html. (Anda pikir saya menyimpan semuanya di kepala saya??)
OK, masing-masing kita beri label/nama.
<INPUT TYPE=CHECKBOX NAME="Ed" VALUE="YA"> Edi Hasibuan<BR> <INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YA"> Ricky Martanto<BR> <INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YA"> Tomi Sudarto<BR> <INPUT TYPE=CHECKBOX NAME="BM" VALUE="YA"> Baramuli<P>
Edi Hasibuan Ricky Martanto Tomi Sudarto Baramuli
Dan terakhir, anda mungkin ingin menambahkan sesuatu di atasnya serta memilih beberapa di antaranya sebagai default. Kalau anda mau, tentu saja.
Siapakah di antara mereka yang merupakan sahabat anda?<BR> <INPUT TYPE=CHECKBOX NAME="ED" VALUE="YA" CHECKED> Edi Hasibuan<BR> <INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YA"> Ricky Martanto<BR> <INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YA" CHECKED> Tomi Sudarto<BR> <INPUT TYPE=CHECKBOX NAME="BM" VALUE="YA"> Baramuli<P>
Siapakah di antara mereka yang merupakan sahabat anda? Edi Hasibuan Ricky Martanto Tomi Sudarto Baramuli
Bentuk masukan selanjutnya adalah Pull Down List. Untuk masukan jenis ini anda gunakan <SELECT> sebagai pengganti <INPUT> dan anda harus tambahkan tag penutup. Mari kita coba.
<SELECT> </SELECT>
Jangan lupa beri nama.
<SELECT NAME="TEMAN BAIK"> </SELECT>
Kemudian tambahkan beberapa option.
<SELECT NAME="TEMAN BAIK"> <OPTION>Edi <OPTION>Ricky <OPTION>Tomi <OPTION>Reza </SELECT>
Dan setiap <OPTION> kita beri VALUE.
<SELECT NAME="TEMAN BAIK"> <OPTION VALUE="Edi">Edi <OPTION VALUE="Ricky">Ricky <OPTION VALUE="Tomi">Tomi <OPTION VALUE="Reza">Reza </SELECT>
Defaultnya adalah pilihan pertama dalam daftar.
Kita dapat mengubah default ini sehingga tidak harus yang tercantum paling atas dalam daftar.
<SELECT NAME="TEMAN BAIK"> <OPTION VALUE="Edi">Edi <OPTION VALUE="Ricky">Ricky <OPTION VALUE="Tomi" SELECTED>Tomi <OPTION VALUE="Reza">Reza </SELECT>
Scrolling List dibuat dengan cara yang persis sama dengan Pull Down List . Pertama-tama kita tambahkan dulu beberapa nama.
<SELECT NAME="TEMAN BAIK"> <OPTION VALUE="Edi">Edi <OPTION VALUE="Ricky">Ricky <OPTION VALUE="Tomi">Tomi <OPTION VALUE="Reza">Reza <OPTION VALUE="Arie">Arie <OPTION VALUE="Putri">Putri <OPTION VALUE="Maria">Maria </SELECT>
Satu-satunya hal yang harus kita lakukan untuk mengubahnya menjadi Scrolling List adalah menambahkan atribut SIZE pada tag <SELECT>.
<SELECT NAME="TEMAN BAIK" SIZE=4> <OPTION VALUE="Edi">Edi <OPTION VALUE="Ricky">Ricky <OPTION VALUE="Tomi">Tomi <OPTION VALUE="Reza">Reza <OPTION VALUE="Arie">Arie <OPTION VALUE="Putri">Putri <OPTION VALUE="Maria">Maria </SELECT>
Atribut SIZE menunjukkan berapa banyak pilihan yang ingin anda tampilkan. Gampang, kan?
Saya tidak punya alasan mengapa anda akan mengubah default pada Scrolling List ini, tetapi karena memang bisa diubah saya rasa saya harus menjelaskannya.
Bentuk masukan lain yang sangat berguna adalah <TEXTAREA>.
<TEXTAREA NAME="KOMENTAR"> </TEXTAREA>
Anda menentukan besarnya kotak masukan dengan cara....
<TEXTAREA NAME="KOMENTAR" ROWS=6 COLS=50> </TEXTAREA>
ROWS adalah tingginya, COLS adalah lebarnya.
Satu atribut yang cukup membantu dalam <TEXTAREA> adalah WRAP. Mungkin ada browser yang tidak mengenal perintah ini, tapi jika demikian, perintah ini akan diabaikan.
Cobalah menuliskan kalimat yang cukup panjang di dalam kotak masukan....
<TEXTAREA NAME="KOMENTAR" ROWS=3 COLS=30 WRAP=VIRTUAL> </TEXTAREA>
WRAP=VIRTUAL berarti kalimat yang lebih panjang dari lebar kotak masukan akan diteruskan ke baris di bawahnya, tetapi yang disimpan oleh browser tetap satu kalimat panjang yang tidak terputus.
Lakukan hal yang sama dengan ini....
<TEXTAREA NAME="KOMENTAR" ROWS=3 COLS=30 WRAP=PHYSICAL> </TEXTAREA>
Pelajaran 5 Bentuk lain dari masukan adalah HIDDEN input.
<INPUT TYPE=HIDDEN NAME="RAHASIA" VALUE="Form 1">
HIDDEN input adalah pasangan nama/nilai yang dikirimkan kepada anda tetapi tidak akan pernah ditampilkan di halaman web. Hidden input inilah yang diperlukan oleh Mailto Formatter. Dengan cara ini Mailto Formatter mengenali form html yang akan diprosesnya.
Misalkan anda melakukan jajak pendapat melalui internet. Anda sudah merancang form html yang indah dan efektif untuk mendapatkan masukan tentang topik yang anda tanyakan. Masalahnya adalah, anda ingin menempatkan form tersebut di beberapa web site untuk menjaring sebanyak mungkin masukan. Anda perlu cara untuk mengetahui web site mana yang memberikan kontribusi terbanyak. Apa yang akan anda lakukan?
Anda bisa menambahkan HIDDEN input ke dalam form anda seperti ini....
<INPUT TYPE=HIDDEN NAME="JAJAKPENDAPAT" VALUE="Web Site 1"> ... untuk web site pertama <INPUT TYPE=HIDDEN NAME="JAJAKPENDAPAT" VALUE="Web Site 2"> ... untuk web site kedua <INPUT TYPE=HIDDEN NAME="JAJAKPENDAPAT" VALUE="Web Site 3"> ... untuk web site ketiga Dan seterusnya dan selanjutnya....
Sebetulnya, anda bisa gunakan pasangan nama/nilai apapun dalam hidden input ini (bahkan dalam setiap jenis input). Saya menggunakan "JAJAKPENDAPAT" untuk memperjelas. Kalau anda pikir terlalu panjang, bisa anda gunakan "JP". Contoh berikut ini tetap merupakan HIDDEN input yang sah....
<INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2"> ... Anda akan dapatkan E=Mc^2
HIDDEN input juga sangat berguna dan banyak dipakai untuk pemrograman/cgi script.
Bentuk terakhir dari input adalah tombol SUBMIT dan RESET.
Kedua perintah ini sangat sederhana....
<INPUT TYPE=SUBMIT>
SUBMIT, tentu saja, dipakai untuk mengirim data yang anda masukkan ke dalam form....
...dan RESET, menghapus seluruh isi form.
Cara Mudah Membuat Frame Hai. Kali ini saya akan menjelaskan tentang pembuatan frame untuk dokumen html anda. Pemakaian
frame secara baik dapat membantu penampilan web site anda dan mempermudah navigasi halaman-
halaman web tersebut. Ingat, kata kuncinya adalah pemakaian secara baik. Jelas?
Membagi halaman web menjadi beberapa frame sebenarnya sangat mudah. Konsep dasarnya adalah
seperti ini: Setiap frame adalah dokumen html biasa. Jika anda ingin membagi halaman web anda menjadi
2 frame yang bersebelahan, maka anda harus membuat dokumen html yang lengkap untuk frame kiri dan
dokumen html yang lengkap pula untuk frame sebelah kanan. Sebagai tambahan anda perlu membuat
dokumen html ketiga. Dokumen ini adalah frame definition document (untuk mudahnya kita sebut saja
MASTER PAGE) dan berisi tag <FRAME> yang menentukan tata letak setiap frame dan dokumen html
yang akan mengisi frame tersebut. Sebetulnya, memang hanya itu fungsinya.
Pada dasarnya, hanya ada dua tag utama tentang frame yang paling perlu kita perhatikan: <FRAMESET>
dan <FRAME>. Cara paling mudah untuk menjelaskannya adalah dengan mengajak anda terjun langsung
dan mulai membuat frame. Saya jamin, dalam waktu 90 menit anda tidak akan perlu pusing-pusing lagi
dalam membuat frame.
Nggak yakin? Jangan buat saya jadi ragu-ragu. Mari kita buktikan!
Perlu saya tekankan bahwa kalau anda berkeinginan untuk membuat dokumen html yang baik, maka anda
harus menyediakan waktu untuk mempelajari tag-tag yang bersangkutan. Kalau anda menggantungkan
diri pada fasilitas "table wizard" yang ada di dalam "editor html canggih yang amat sangat mudah
dipakai" yang banyak tersedia di pasaran, fleksibilitas anda akan sangat terbatas. Dan hasil akhirnya
mungkin tidak akan seperti yang anda harapkan. Menurut pendapat saya, editor html terbaik untuk dipakai
adalah editor berbasis teks. Program-program ini akan mempermudah penulisan dokumen html anda,
tetapi tidak mengerjakannya untuk anda.
Pelajaran 1 Pertama-tama kita butuh beberapa dokumen html untuk tutorial ini. Buka Notepad dan copykan yang berikut ini agar anda
bisa segera mulai.
<HTML> <HEAD> <TITLE>Frame HTML Saya</TITLE> </HEAD> <BODY>
</BODY> </HTML>
Setiap dokumen akan kita beri nama. Dalam tutorial Cara Mudah Membuat Tabel dan Cara Mudah Membuat Form kita sudah gunakan terlalu banyak nama pria. Rasanya kini saatnya menghadirkan beberapa gadis muda di sini.
<HTML> <HEAD> <TITLE>Frame HTML Saya</TITLE> </HEAD> <BODY> Lisa </BODY> </HTML>
Buat folder dengan nama frame dan simpan file tersebut dengan nama lisa.html.
Sekarang coba anda buat dokumen html yang lain.
<HTML> <HEAD> <TITLE>Frame HTML Saya</TITLE> </HEAD> <BODY> Putri </BODY> </HTML>
Simpan di folder tadi dengan nama putri.html.
Lakukan hal yang sama untuk Tessy, Tina, Sari, dan Ratna. Simpan semuanya di folder frame. Seharusnya anda sekarang mempunyai satu folder dengan 6 dokumen html yang berdiri sendiri-sendiri.
Ok, ini yang menarik... membuat master page anda. Mulai dengan ini.
<HTML> <HEAD> <TITLE>Frame HTML Saya- Master Page</TITLE> </HEAD>
<BODY> </BODY>
</HTML>
Hapus tag <BODY>. Master page tidak menggunakannya...
<HTML> <HEAD> <TITLE>Frame HTML Saya- Master Page</TITLE> </HEAD> </HTML>
...yang dipakai adalah tag <FRAMESET>.
<HTML> <HEAD> <TITLE>Frame HTML Saya- Master Page</TITLE> </HEAD>
<FRAMESET> </FRAMESET>
</HTML>
Agar lebih bersih dan jelas, saya tidak akan tuliskan lagi tag <HTML>, <HEAD> dan <TITLE>. Ingat, anda harus tetap menuliskannya di dokumen anda.
<FRAMESET> </FRAMESET>
Sekarang adalah waktu yang tepat untuk menyimpannya. Simpan di folder anda (bersama gadis-gadis tadi) dengan nama index.html. Jika anda coba buka file tersebut di browser anda sekarang, halaman ini masih kosong. Tentu saja, yang anda katakan barulah "Inilah Master Page saya".
Mari kita tentukan bagaimana penampilan halaman tersebut. Kita minta pada browser untuk membaginya menjadi 2 kolom, masing-masing menempati 50% bagian.
<FRAMESET COLS="50%,50%"> </FRAMESET>
Sabar... halaman ini masih tetap kosong, masih ada satu hal lagi yang harus kita lakukan.
Kita harus beritahu browser apa yang mengisi masing-masing frame.
<FRAMESET COLS="50%,50%"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> </FRAMESET>
LIHAT. Anda seharusnya bangga dengan frame html yang sudah anda ciptakan!
Satu hal lagi sebelum kita lanjutkan. Ingat bahwa <FRAMESET> adalah tag container, sedangkan <FRAME> bukan. Bagi anda yang tidak tahu apa artinya, tag container adalah tag yang berpasangan, jadi memiliki <TAG> pembuka dan </TAG> penutup.
Pelajaran 2
Kita ingat bahwa tag <FRAMESET> lah yang melakukan semua pembagian. Memang itulah yang dilakukannya... membagi halaman. Tag ini menentukan juga bagaimana pembagian tersebut dilakukan. Tapi ingat, kapanpun anda ingin melakukan pembagian - gunakan <FRAMESET>. Dapatkah kita membagi halaman menjadi lebih dari 2 bagian? Ya, tapi jangan lupa menyediakan satu halaman untuk setiap frame atau anda akan membingungkan browser.
<FRAMESET COLS="20%,20%,20%,20%,20%"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> <FRAME SRC="ratna.html"> <FRAME SRC="tina.html"> <FRAME SRC="sari.html"> </FRAMESET>
LIHAT
Tentu saja kita bisa membuat setiap frame berbeda ukurannya. Pastikan anda tidak salah hitung atau browser akan menampilkan interpretasinya sendiri.
<FRAMESET COLS="10%,20%,30%,15%,25%"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> <FRAME SRC="ratna.html"> <FRAME SRC="tina.html"> <FRAME SRC="sari.html"> </FRAMESET>
LIHAT
Bila halaman kita bagi menjadi baris (ROWS) dan bukannya kolom (COLS), kita akan mendapat sesuatu yang berbeda sama sekali.
<FRAMESET ROWS="10%,20%,30%,15%,25%"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> <FRAME SRC="ratna.html"> <FRAME SRC="tina.html"> <FRAME SRC="sari.html"> </FRAMESET>
LIHAT
Mari kita kembali ke bentuk 2 frame, halaman yang dibagi menjadi 2 kolom sama besar.
<FRAMESET COLS="50%,50%"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> </FRAMESET>
LIHAT
Kita bisa mengganti 50% dengan 50 pixels (picture elements, setiap titik di layar komputer anda. Atau kita gunakan saja istilah titik. OK? OK). Dan kita bisa gunakan * sebagai pengganti angka. * berarti berapapun sisanya.
<FRAMESET COLS="50,*"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> </FRAMESET>
Ada satu hal yang sangat penting dan harus anda perhatikan. Misalkan anda membuat frame selebar 100 titik di sebelah kiri, dan 100 titik di kanan. Karena ukuran layar anda adalah 800x600, maka frame ketiga di tengah menjadi selebar 600 titik. Semuanya tampak bagus dan keren... untuk anda. Misalkan layar komputer saya ukurannya hanya 640x480. Kedua frame dengan lebar 100 titik tadi hanya tampil selebar 80 (640/800x100) titik di layar saya. Bila anda memakai ukuran absolut dalam tag <FRAMESET> anda, SELALU gunakan paling tidak satu * sebagai frame yang elastis. Dengan cara ini segala sesuatunya akan tampak baik bagi semua orang.
Ini adalah kesalahan umum yang sering terjadi dalam pemakaian frame dan saya ingin anda ekstra hati-hati mengenai hal ini. Pembagian halaman yang paling umum adalah frame kecil di sebelah kiri berisi menu atau topik bahasan dan frame utama yang lebih besar di sebelah kanan seperti ini. Masalahnya adalah ... Jika anda membuat frame menggunakan persentase (misalnya <FRAMESET COLS="15%,85%">) segala sesuatunya akan tampak baik bagi anda. Tapi... bagi orang lain dengan ukuran layar yang berbeda, yang tampak mungkin seperti ini.
Penyebabnya adalah karena anda menentukan frame sebelah kiri lebarnya 15%. 15% dari apa? 15% dari berapapun lebar layar komputer mereka. Ini berarti frame kiri bisa 'tampil beda' bagi orang yang berbeda pula. Bagaimana mengatasinya? Sudah tahu nanya... Gunakan saja nilai absolut untuk frame kiri dan buatlah frame kanan elastis (misalnya <FRAMESET COLS="120,*">). Gitu aja kok repot.
Tidak ada salahnya jika nilai absolut tersebut kita perbesar sedikit. Supaya tidak terlalu sesak dan ada ruang untuk bernafas. Sebagai contoh, jika 100 titik mencukupi tetapi tampak terlalu sempit... ubahlah lebar frame menjadi 120 atau 125 titik.
Biasakanlah untuk memeriksa tampilan anda dengan beberapa ukuran layar yang berbeda. Kalau anda menggunakan Windows 98, ubahlah setting layar anda (Di desktop anda, klik kanan kemudian pilih Properties-Settings-Screen Area). Supaya praktis, ubah pilihan (Properties-Settings-Advanced-General) menjadi "Apply the new color setting without restarting". Dengan demikian anda tidak harus me-restart komputer setiap kali. Cara lain adalah menggunakan program Quickres dari Microsoft.
Kita juga dapat membuat lebih dari satu frame elastis dan menyatakan ukurannya relatif satu terhadap yang lain.
<FRAMESET COLS="50,*,2*"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> <FRAME SRC="ratna.html"> </FRAMESET>
LIHAT
Terjemahannya kurang lebih demikian: Buat 3 frame. Buat frame pertama selebar 50 titik. Sisanya bagikan kepada frame 2 dan 3, tetapi buatlah frame 3 dua kali lebih besar dari frame 2. Tempatkan Lisa di frame pertama, Putri di frame kedua dan Ratna ketiga.
Pastikan bahwa semuanya dibuat dengan urutan yang benar. <FRAME> pertama ditampilkan sesuai dengan ukuran yang pertama dalam tag <FRAMESET> (50/lisa), ukuran kedua untuk frame kedua (*/putri) dan ukuran ketiga untuk frame ketiga (2*/ratna). Saya tahu bahwa untuk anda hal ini sudah sangat jelas, tetapi ini sangat penting dan saya ingin memberi perhatian yang lebih untuk itu.
Bagaimana jika kita ingin membagi Ratna menjadi dua bagian horisontal. Ingat yang saya katakan bahwa kalau anda ingin membagi halaman, anda harus menggunakan tag <FRAMESET>. Pertama-tama kita harus mengganti Ratna dengan pasangan tag <FRAMESET>.
<FRAMESET COLS="50,*,2*"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> <FRAMESET> </FRAMESET> </FRAMESET>
Pada saat ini kita katakan pada browser: Buat 3 frame. Buat frame pertama selebar 50 titik. Sisanya bagikan kepada frame 2 dan 3, tetapi buatlah frame 3 dua kali lebih besar dari frame 2. Tempatkan Lisa di frame pertama, Putri di frame kedua dan frame ketiga akan kita bagi lebih lanjut. Sekarang kita harus menentukan bagaimana pembagian frame ketiga tersebut kita lakukan.
Ada yang kita lupakan. Kalau saja anda ingat masalah yang anda hadapi pada saat membuat halaman direktori.... Anda ingat? Bagus! Jadi bukalah daftar.html dan tambahkan TARGET yang diperlukan.
<HTML> <HEAD> <TITLE>Membuat Frame- Daftar</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF">
<H3>Daftar</H3>
<A HREF="home.html" TARGET="FRAME-UTAMA">Home</A><P>
<A HREF="sini.html" TARGET="FRAME-UTAMA">Ke sini</A><BR> <A HREF="sana.html" TARGET="FRAME-UTAMA">atau ke sana</A><P>
atau kunjungi<BR> <A HREF="http://www.pts.co.id/" TARGET="_top">PTS Online</A><BR> <A HREF="http://www.tutorial.or.id/" TARGET="_top">Web Tutorial</A>
</BODY> </HTML>
Coba lihat Master Page.