Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
(Bagi Mahasiswa Fakultas Ekonomi Universitas Putra Indonesia “YPTK”)
HandOut Web Design (Bagi Mahasiswa Fakultas Ekonomi Universitas Putra Indonesia “YPTK”) Instruktur Ir. H. Sumijan, M.Sc Dekan Fakultas Ilmu Komputer (Filkom) Universitas Putra Indonesia “YPTK”
2
DASAR-DASAR BELAJAR HTML
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.
3
Materi 1 Mulailah dengan menuliskan ini....
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
4
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>
5
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.
6
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.
7
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>
8
Inilah gambar latar belakangnya.
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. Inilah gambar latar belakangnya. 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>
9
Agar gambar tadi bisa tampil, browser harus dapat menemukannya
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)
10
Ini adalah jenis teks biasa -> iiiiiiiiii oooooooooo mmmmmmmmmm
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 -> <BODY> Sesuatu yang <FONT>menarik</FONT> </BODY> Kemudian tentukan SIZE (ukuran)-nya. Sesuatu yang <FONT SIZE=6>menarik</FONT>
11
besarnya! besar sekali & besar
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>
12
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.
13
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.
14
<H1>Sesuatu yang menarik<H1>
15
Atribut yang bermanfaat dalam tag heading adalah ALIGN
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
16
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?
17
(Cara membuat roller coaster ada di sini kalau anda mau melihatnya.)
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.
18
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 Kok Seperti ini?? </BODY>
19
Sesuatu yang menarik seperti tangan
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
20
non-breaking space (spasi)
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.
21
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>
22
Tanya: Bagaimana saya tahu ukuran (WIDTH dan HEIGHT) suatu gambar
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
23
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.
24
Mari kita belajar tentang link.
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!
25
Lihat Yahoo! </BODY> Lihat Yahoo!Kemudian tambahkan sepasang anchor tag. <BODY> Lihat <A>Yahoo!</A> 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. Lihat <A HREF=" Lihat Yahoo!Mari kita coba satu lagi. Lihat PTS Online!
26
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:
27
Dimensi 310 x 304 jumlah warna- 238 Ukuran - 69 Kb
28
Semua pengeditan gambar dikerjakan dengan Paint Shop Pro
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).
29
<BODY> <IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62> </BODY> Tambahkan tag <A>. <A><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A> Kemudian tambahkan URL gambar besar dan selesailah sudah! <A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A> 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. <A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62 BORDER=0></A>
30
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...
31
<--Ini--- --adalah-- --baris-- --sebuah-- ---tabel--> 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.
32
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.
33
Mulailah membuat tabel anda dengan mengetikkan tag yang diperlukan
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. <TABLE> <TR> </TR> </TABLE> Dan tentu saja setiap tabel harus memiliki paling sedikit satu sel data. <TABLE> <TR> <TD></TD> </TR> </TABLE>
34
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:
35
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>
36
Saya akan tunjukkan sesuatu yang lain kepada anda
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.
37
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.
38
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. <FORM> </FORM> 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 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>. <FORM METHOD=POST ENCTYPE="application/x-www-form-urlencoded"> </FORM>
39
Baris ini sangat penting
Baris ini sangat penting. Satu-satunya hal yang harus anda lakukan adalah menuliskan alamat 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.
40
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>
41
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>
42
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
43
Bentuk masukan selanjutnya adalah Pull Down List
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>
44
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?
45
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>
46
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.
47
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.
48
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.
49
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>. <FRAMESET> </FRAMESET> Agar lebih bersih dan jelas, saya tidak akan tuliskan lagi tag <HTML>, <HEAD> dan <TITLE>. Ingat, anda harus tetap menuliskannya di dokumen anda. 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".
50
Mari kita tentukan bagaimana penampilan halaman tersebut
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>
51
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> 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> 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> 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>
52
Ada satu hal yang sangat penting dan harus anda perhatikan
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.
53
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.
54
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=" TARGET="_top">PTS Online</A><BR> <A HREF=" TARGET="_top">Web Tutorial</A> </BODY> </HTML> Coba lihat Master Page.
Presentasi serupa
