1. HandOut Web Design (Bagi Peserta Pelatihan Guru-guru SMA Se-Sumatera Barat) Instruktur Alexandri, S.Kom Staf Pengajar Fakultas Ilmu Komputer (Filkom) Universitas Putra Indonesia “YPTK”
2. 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 H yper T ext M ark-up L anguage. 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 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> 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
8. 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. Sesuatu yang menarik
9. 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. Satu jenis teks yang sangat berguna adalah mono-spaced font, atau Typewriter Text. <BODY> <TT> Sesuatu yang menarik </TT> </BODY> <BODY> Sesuatu yang <FONT> menarik </FONT> </BODY> Kemudian tentukan SIZE (ukuran)-nya. <BODY> Sesuatu yang <FONT SIZE=6 >menarik</FONT> </BODY> iiiiiiiiii oooooooooo mmmmmmmmmm Ini adalah jenis mono-space -> iiiiiiiiii oooooooooo mmmmmmmmmm Ini adalah jenis teks biasa ->
11. 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> 7 6 5 4 3 2 1 besarnya! besar sekali & besar agak besar normal kecil sangat kecil
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> <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
15. 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
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.... Anda bisa mengubahnya kalau perlu (perhatikan, saya mengatakan kalau perlu ). Seluruh dunia terbiasa dengan warna biru untuk link. Mengapa harus membingungkan diri sendiri? Teks biasanya hitam Link biasanya biru Active link umumnya merah Visited link biasanya ungu
17. 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 r ol l e rc o a s t e r! (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. 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.
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 <BR> Kok <BR> Seperti <BR> ini?? </BODY>
19. <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> He! Jadinya kok seperti ini?? Sesuatu yang menarik seperti tangan atau tali Sesuatu yang menarik seperti tangan atau tali Sesuatu yang menarik seperti tangan
20. 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? 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 html SRC="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. 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> </BODY> Lihat Yahoo!T ambahkan 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>
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 Dimensi 207 x 203 jumlah warna- 48 Ukuran - 19 Kb Dimensi 207 x 203 jumlah warna- 238 Ukuran - 34 Kb
28. 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> . <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>
30. 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... Materi 7 Membuat Tabel
31. 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. sel sel sel ---tabel--> --sebuah-- --baris-- --adalah-- <--Ini---
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. 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>
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. 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> Bram Mungkin anda ingin batas yang lebih besar? <TABLE BORDER=5> <TR> <TD>Bram</TD> </TR> </TABLE> Bram
36. 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. 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. Materi 8 Membuat Form
38.
39. 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.
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>
