Ida Bagus Surya Dharma,S.Kom

Ida Bagus Surya Dharma,S.Kom
Perancangan Web Pertemuan 3 HTML STIKOM BALI Ida Bagus Surya Dharma,S.Kom I Nyoman Suta Darmayasa, S.Kom.

HTML I Nyoman Suta Darmayasa, S.Kom.

List Tag <ol></ol> : ordered list
<ul></ul> : unordered list Nama-Nama Buah: <ol> <li>Apel</li> <li>Melon</li> <li>Jeruk</li> <li>Nanas</li> </ol> Nama-Nama Buah: <ul> <li>Apel</li> <li>Melon</li> <li>Jeruk</li> <li>Nanas</li> </ul>

List Tag Nama-Nama Buah: Nama-Nama Buah: <ul type=‘square’>
<li>Apel</li> <li>Melon</li> <li>Jeruk</li> <li>Nanas</li> </ul> Nama-Nama Buah: <ul type=‘circle’> <li>Apel</li> <li>Melon</li> <li>Jeruk</li> <li>Nanas</li> </ul>

List Tag Nama-Nama Buah: Nama-Nama Buah: <ol type=‘I’>
<li>Apel</li> <li>Melon</li> <li>Jeruk</li> <li>Nanas</li> </ol> Nama-Nama Buah: <ol type=‘a’> <li>Apel</li> <li>Melon</li> <li>Jeruk</li> <li>Nanas</li> </ol> Type : 1, A, a, I, i

Table <table></table> : digunakan untuk membuat table.
<table border=‘1’> <tr> <td>Kolom 1 Baris 1</td> <td>Kolom 2 Baris 1</td> <td>Kolom 3 Baris 1</td> </tr> <td>Kolom 1 Baris 2</td> <td>Kolom 2 Baris 2</td> <td>Kolom 3 Baris 2</td> </table>

Colspan dan Rowspan colspan : untuk menggabungkan dua buah kolom
rowspan : untuk menggabungkan dua buah baris <table border=‘1’> <tr> <td colspan='3'>Kolom 1,2,3 Baris 1</td> </tr> <td rowspan='2'>Kolom 1 Baris 2,3</td> <td>Kolom 2 Baris 2</td> <td>Kolom 3 Baris 2</td> <td>Kolom 2 Baris 3</td> <td>Kolom 3 Baris 3</td> </table>

<table> Atributes
border, width, cellpadding, cellspacing <td> align, valign, colspan, rowspan, height, width,

Membuat Layout Untuk Halaman Web

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

<html> <head> <title>Layout Halaman Web</title> </head> <body> <table border='1' width='900px'> <tr> <td colspan='3' height='100px'> <h1>Header Web </h1> </td> </tr> <td height='500px'>Menu Kiri</td> <td>Konten Web</td> <td>Menu Kanan</td> <td colspan='3' height='50px'><h2>Footer </h2></td> </table> </body> </html>

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>

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>

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)

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>

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> I Nyoman Suta Darmayasa, S.Kom.

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.

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

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?

(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.

Kita akan mulai dengan mempelajari sesuatu tentang cara kerja browser
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>

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

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

Anda menyatakan pemakaian gambar dengan tag <IMG> (image).
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. 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

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> 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!

Dimensi 310 x 304 jumlah warna- 238 Ukuran - 69 Kb

<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>

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.

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. <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>

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.

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>

Selanjutnya adalah Radio Buttons dan Check Boxes
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
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>

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.

Pertama-tama kita butuh beberapa dokumen html untuk tutorial ini
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>. <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".

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>

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>

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=" TARGET="_top">PTS Online</A><BR> <A HREF=" TARGET="_top">Web Tutorial</A> </BODY> </HTML>

Terima Kasih

Ida Bagus Surya Dharma,S.Kom

Presentasi serupa

Presentasi berjudul: "Ida Bagus Surya Dharma,S.Kom"— Transcript presentasi:

Presentasi serupa

Tentang proyek

Tanggapan

Masuk

Otorisasi melalui jaringan sosial:

Ida Bagus Surya Dharma,S.Kom

Presentasi serupa

Presentasi berjudul: "Ida Bagus Surya Dharma,S.Kom"— Transcript presentasi:

Presentasi serupa

Tentang proyek

Tanggapan