modul html dan javascript - LEO
advertisement
1 MODUL HTML DAN JAVASCRIPT BAB 1 PENGENALAN HTML HyperText Markup Language (HTML) merupakan bahasa standar yang digunakan untuk membuat sebuah tampilan halaman website. Sesuai dengan namanya yaitu HyperText Markup Language (HTML) maka dokumen HTML terdiri dari tanda-tanda (markup) untuk menandai perintah-perintahnya. A. Struktur HTML Document Pasangan tag <HTML></HTML> menandakan bahwa kode yang terdapat di dalamnya adalah kode HTML sehingga browser akan menerjemahkan kode tersebut. Bagian yang terdapat dalam <HTML></HTML> umumnya terbagi atas : 1. Pada bagian kepala, ditandai dengan pasangan tag <HEAD></HEAD>. 2. Pada bagian badan, ditandai dengan pasangan tag <BODY></BODY>. Pada bagian kepala, bisa ditentukan judul dokumen HTML. Judul ini ditulis dengan tag <TITLE> dan </TITLE>. Contoh 1 : 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan DIPANEGARA COMPUTER CLUB 2 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan1.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. B. Cara menulis tag dalam HTML Perintah HTML biasanya disebut TAG. TAG digunakan untuk menentukan tampilan dari document HTML. Hampir semua tag berpasangan. <TAG MULAI></TAG PENUTUP> Contoh : Setiap document HTML diawali dan diakhiri dengan tag HTML. DIPANEGARA COMPUTER CLUB 3 MODUL HTML DAN JAVASCRIPT <html> .…… </html> Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html> keduanya menghasilkan output yang sama. Bentuk dari tag HTML sebagai berikut : <ELEMENT ATTRIBUTE = “value”> Element Attribute Value Contoh : : Nama Tag : Atribut dari Tag : Nilai dari Atribut. <BODY BGCOLOR=”blue”> </BODY> BODY merupakan element, BGCOLOR merupakan atribut yang memiliki nilai blue. C. Atribut Tag <BODY> Di dalam tag <BODY> terdapat beberapa atrbut yang bisa digunakan untuk mempercantik tampilan suatu halaman website. Adapun atribut- atribut tersebut adalah sebagai berikut : ATRIBUT FUNGSI BGCOLOR Menetukan warna background suatu halaman BACKGROUND Menentukan gambar/image yang akan dipasang sebagai background halaman web TEXT Menetukan warna teks normal LINK Menentukan warna teks yang berfungsi sebagai link ALINK Menentukan warna teks link ketika diklik VLINK Menentukan warna teks link ketika selesai diklik DIPANEGARA COMPUTER CLUB 4 MODUL HTML DAN JAVASCRIPT Contoh 2: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan 2. Simpan dengan nama file latihan2.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. D. Tag Dalam HTML 1. Tag <BR> Fungsi tag <BR> adalah untuk membuat baris baru atau berpindah baris. DIPANEGARA COMPUTER CLUB 5 MODUL HTML DAN JAVASCRIPT Contoh 3: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan 2. Simpan dengan nama file latihan3.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. 2. Tag <P> Tag <P> digunakan untuk membuat paragraph. Di dalam tag <P> terdapat atribut yang ALIGN yang berguna untuk mengatur tata letak teks. Nilai dari atribut ALIGN ialah : CENTER, menempatkan tekt pada tengah layar. DIPANEGARA COMPUTER CLUB 6 MODUL HTML DAN JAVASCRIPT LEFT, mengatur teks rata kiti terhadap halaman. RIGHT, mengatur teks rata kanan terhadap halaman. JUSTIFY, mengatur teks rata kiri dan rata kanan. Contoh 4: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan 2. Simpan dengan nama file latihan4.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 7 MODUL HTML DAN JAVASCRIPT 3. Tag Judul HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang sebagai judul dalam badan dokumen. Tag – tag judul ini berupa : <H1>…</H1> <H2>…</H2> <H3>…</H3> <H4>…</H4> <H5>…</H5> <H6>…</H6> Contoh 5: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan 2. Simpan dengan nama file latihan5.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 8 MODUL HTML DAN JAVASCRIPT 4. Tag <HR> Untuk mempercantik halaman, seringkali pembuat dokumen Web menambahkan garis horizontal. Garis ini sebenarnya dapat dibuat dengan mudah, yakni dengan menyertakan tag <HR>. HR juga memiliki atribut seperti : ATRIBUT FUNGSI SIZE Menentukan ketebalan garis WIDTH Menentukan lebar garis ALIGN Menentukan peletakan teks dalam baris NOSHADE Menentukan agar garis tidak disertai bayangan Contoh 6: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan DIPANEGARA COMPUTER CLUB 9 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan6.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. E. Mengatur Teks 1. Mengatur Teks Untuk mengatur teks terdapat beberapa tag yang bisa digunakan antara lain : Tag FUNGSI <B> Teks ditampilkan dalam keadaan tebal <BIG> Teks ditampilkan dengan ukuran besar dari ukuran normal DIPANEGARA COMPUTER CLUB 10 MODUL HTML DAN JAVASCRIPT Tag <I> <SMALL> <SUB> <SUP> <U> <EM> <STRONG> FUNGSI Teks ditampilkan dalam keadaan miring Teks ditampilkan dengan ukuran lebih kecil dari ukuran normal Teks tampilkan sebagai subkrip Teks tampilkan sebagai superskrip Teks ditampilkan dengan garis bawah Menyatakan penekanan pada teks. Biasanya teks ditampilkan miring Menyatakan teks yang sangat penting untuk diperhatikan. Biasanya ditampilkan tebal Contoh 7: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan 2. Simpan dengan nama file latihan7.html. DIPANEGARA COMPUTER CLUB 11 MODUL HTML DAN JAVASCRIPT 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. 2. Penggunaan tag <PRE></PRE> Tag <PRE> digunakan untuk menampilkan teks pada web browser yang sama persis dengan teks yang diapit oleh tag <PRE></PRE> Contoh 8: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan DIPANEGARA COMPUTER CLUB 12 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan8.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 13 MODUL HTML DAN JAVASCRIPT Latihan 1. Buatlah listing sesuai dengan tampilan di bawah ini : DIPANEGARA COMPUTER CLUB 14 MODUL HTML DAN JAVASCRIPT BAB 2 FONT, IMAGE, LINK A. Mengatur huruf dengan Tag <Font> Tag <FONT>…</FONT> berguna untuk mengatur jenis, ukuran, maupun warna font. Jenis Font Untuk menentukan jenis font, digunakan atribut FACE. Contoh 9: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan 2. Simpan dengan nama file latihan9.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 15 MODUL HTML DAN JAVASCRIPT Ukuran Font Untuk menentukan ukuran fontn ditentukan oleh atribut SIZE. Contoh 10: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan 2. Simpan dengan nama file latihan10.html. DIPANEGARA COMPUTER CLUB 16 MODUL HTML DAN JAVASCRIPT 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. Warna Font Atribut pada tag <FONT> yang berkaitan dengan warna teks yaitu COLOR, yang berguna untuk menentukan warna dari font tersebut. Contoh 11: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan DIPANEGARA COMPUTER CLUB 17 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan11.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. B. Menambahkan Gambar dengan Tag <IMG> Terkadang kita jumpai halaman web dengan latar belakan berupa suatu gambar. Latar belakang seperti itu kadangkala mempercantik halaman web. Untuk menyertakan suatu gambar sebagai DIPANEGARA COMPUTER CLUB 18 MODUL HTML DAN JAVASCRIPT latar belakang, dapat digunakan atribut BACKGROUND pada tag <BODY>. Bentuknya sebagai berikut : <BODY BACKGROUND=”NamaFileGambar”> Atau menampilkan dengan Tag <IMG> dengan cara paling sederhana yaitu : <IMG SRC=”NamaFileGambar”> Mengatur Tata Letak Teks Terhadap Gambar Tag <IMG> menyediakan atribut bernama ALIGN yang berfungsi untuk mengatur penempatan teks terhadap gambar dan untuk mengatur penempatan gambar. Nilai dari atribut ALIGN : Nilai TOP Keterangan Teks diletakkan di bagian atas MIDDLE BOTTOM LEFT Teks diletakkan di tengah – tengah Merupakan nili default. Teks diletakkan di bagian bawah Gambar diletakkan di sebelah kiri pada halaman RIGHT Gambar diletakkan di sebelah kanan pada halaman Memberi Bingkai Dengan menggunakan atribut BORDER pada tag <IMG>, anda bisa mengatur agar gambar Anda diberi bingkai atau tidak. Misal: <IMG SRC=”NamaFileGambar” BORDER=”1”> Contoh 12: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan DIPANEGARA COMPUTER CLUB 19 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan12.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 20 MODUL HTML DAN JAVASCRIPT Mengatur Ukuran Gambar Bila Anda memiliki gambar yang besar dan bermaksud ingin merubah ukuran gambar saat ditampilkan, Anda bisa menggunakan atribut HEIGHT untuk tinggi gambar dan WIDTH untuk mengatur lebar gambar. Misal: <IMG SRC=”NamaFileGambar” HEIGHT=”150” WIDTH=”150”> Contoh 13: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan 2. Simpan dengan nama file latihan13.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 21 MODUL HTML DAN JAVASCRIPT C. Menambahkan Hiperlink dengan Tag <Link> Untuk membuat link ke halaman lain, digunakan pasangan tag<A>…</A> atau yang biasa yang disebut tag jangkar atau anchor tag. Bentuk yang paling sering digunakan adalah sebagai berikut : <A HREF=“URL” TARGET=“VALUE”>NAMA LINK </A> Keterangan o o o o o <a <! - - tag anchor- - > href<! - - atribut - - > url<! - - alamat tujuan - - > target<! - - target tampilan link - - > nama link <! - - namalink yg dibuat - - > DIPANEGARA COMPUTER CLUB 22 MODUL HTML DAN JAVASCRIPT untuk mempraktikan Link, buatlah terlebih dulu dua buah berkas HTML berikut ini: File halA.html : File halB.html : Setelah membuat dua file di atas, lalu ikuti listing di bawah ini. DIPANEGARA COMPUTER CLUB 23 MODUL HTML DAN JAVASCRIPT Contoh 14: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan 2. Simpan dengan nama file latihan14.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 24 MODUL HTML DAN JAVASCRIPT Ket : Jika diklik Halaman A maka halaman akan menuju ke halaman A, sedangkan jika halaman B diklik maka halaman akan menuju ke halaman B Jenis Link diatas biasa juga disebut dengan link relative karena link dari halaman ke halaman yang lain dalam komputer yang sama, dan tidak perlu menggunakan alamat internet yang lengkap. Sedangkan untuk link ke website lain biasa disebut link absolut karena harus menuliskan alamat situsnya seperti : <A Href=”http://www.google.com”>Google</a> Contoh 15: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan 2. Simpan dengan nama file latihan15.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 25 MODUL HTML DAN JAVASCRIPT Atribut Target o o o o o _Blank ariinya membuka window baru di browser. _Parent artinya keluar dari frame _Top artinya keluar dari freme _Self artinya tampilan pada lokasi link Nama frame artimya sesuai nama yang diberikan pada saat menciptakan bagian frame. Link Ke Bagian Lain Dalam Halaman Yang Sama (Bookmark) Link jenis ini dibuat jika isi halaman cukup panjang sehingga jika ditampilkan dalam browser web akan mengharuskan kita scroll layar berulang-ulang. Letakkan kursor pada baris atau teks yang menjadi awal dari bagian tersebut kemudian sisipkan nama bagian tersebut dengan <a name=“namabagian”> Ketiklah tag <a href=“#namabagian”>nama link</a>dilokasi yang diinginkan. DIPANEGARA COMPUTER CLUB 26 MODUL HTML DAN JAVASCRIPT Contoh 16: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan 2. Simpan dengan nama file latihan16.html. DIPANEGARA COMPUTER CLUB 27 MODUL HTML DAN JAVASCRIPT 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 28 MODUL HTML DAN JAVASCRIPT Link Ke Email Mailtom merupakan link ke email. <A href= “mailto:[email protected]?subject= Bagi Ilmu”> Kirim email </A> DIPANEGARA COMPUTER CLUB 29 MODUL HTML DAN JAVASCRIPT BAB 3 LIST DAN TABLE A. LIST List merupakan bentuk yang umum digunakan untuk menguraikan daftar sesuatu. List dapat ditandai dengan angka, simbolsimbol bahkan dapat tanpa tanda apapun. Untuk menampilkan simbol dari list digunakan tag <LI> Jenis list dalam HTML dibagi menjadi : Ordered List Unordered List Directory List Menu List Definition List Ordered List dan Unordered List adalah jenis list yang paling sering digunakan. Sedangkan Directory List, Menu List dan Definition List jarang digunakan dalam membuat suatu halaman web. 1. Ordered List (OL) Tag <OL> berfungsi untuk membuat daftar urut yang disertai dengan penomoran. Daftar nilai untuk atribut TYPE tag <OL> yaitu : Nilai Keterangan A Huruf capital digunakan sebagai pengganti nomor urut a Huruf kecil digunakan sebagai pengganti nomor urut I Angka romawi dengan huruf capital digunakan sebagai DIPANEGARA COMPUTER CLUB 30 MODUL HTML DAN JAVASCRIPT Nilai i 1 Keterangan pengganti nomor urut Angka romawi dengan huruf kecil digunakan sebagai pengganti nomor urut Angka biasa digunakan sebagai penomoran. Merupakan nilai default kalau TYPE tidak disebutkan. Contoh 17: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan 2. Simpan dengan nama file latihan17.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 31 MODUL HTML DAN JAVASCRIPT 2. Unordered List (UL) Tag <UL> biasanya ditandai dengan pemakaian bullet untuk menandai setiap item dalam list. Daftar nilai untuk atribut TYPE tag <UL> yaitu : Nilai Bentuk Bullet CIRCLE o DISC SQUARE Contoh 18: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan DIPANEGARA COMPUTER CLUB 32 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan18.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 33 MODUL HTML DAN JAVASCRIPT Contoh 19: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan 2. Simpan dengan nama file latihan18.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 34 MODUL HTML DAN JAVASCRIPT B. TABEL Tag <Tabel>..</Table> digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan Tag – tag yang terkait dengan pembuatan table : Tag <TABLE>..</TABLE> <CAPTION>..</CAPTION> <TR>..</TR> <TH>..</TH> <TD>..</TD> Keterangan Mengawali dan mengakhiri sebuah table Menentukan judul pada tabel Membuat sebuah dalam tabel Membuat Judul kolom Membuat sebuah sel data Contoh 20: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan DIPANEGARA COMPUTER CLUB 35 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan20.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. 1. Memberi Garis pada Tabel Bentuk : <Table BORDER=”bilangan”> Kalau BORDER tidak disertakan dalam tag <TABLE>, nilai untuk BODER dianggap sama dengan no, dengan akibat garis tidak ditampilkan. 2. Menentukan Warna Latar Belakang Tabel Untuk menambahkan warna latar belakang table, digunakan atribut BGCOLOR pada tag <TABLE>. Contoh 21: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan DIPANEGARA COMPUTER CLUB 36 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan21.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 37 MODUL HTML DAN JAVASCRIPT 3. Menentukan Ukuran Tabel Untuk mengatur ukuran Tabel digunakan atribut HEIGHT untuk tinggi, dan WIDTH untuk lebar table. 4. Pengaturan posisi Teks Pada Table Ada dua posisi teks pada table yaitu vertical dan horizontal. Untuk posisi vertical digunakan atribut VALIGN dengan beberapa nilai antara lain : Nilai VALIGN TOP MIDDLE BOTTOM Keterangan Teks diletakkan di bagian atas pada sel Teks diletakkan di bagian tengah pada sel Teks diletakkan di bagian bawah pada sel Untuk posisi horizontal digunakan tag ALIGN dengan beberapa nilai antara lain : Nilai VALIGN LEFT CENTER RIGHT JUSTIFY Keterangan Teks rata kiri Teks rata tengah Teks rata kanan Teks rata kiri dan kanan Contoh 22: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan DIPANEGARA COMPUTER CLUB 38 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan22.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 39 MODUL HTML DAN JAVASCRIPT 5. Menggabungkan sel Tabel Untuk menggabungkan beberapa baris sel menjadi satu baris, digunakan atribut ROWSPAN pada tag <TD>, sedangkan untuk menggabungkan beberapa sel menjadi satu kolom digunakan atribut COLSPAN pada tag <TD>. Contoh 23: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan DIPANEGARA COMPUTER CLUB 40 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan23.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. Latihan 3. Buatlah listing sesuai dengan tampilan di bawah ini : DIPANEGARA COMPUTER CLUB 41 MODUL HTML DAN JAVASCRIPT BAB 4 FORM DAN FRAME A. Dasar penggunaan form Form dibentuk dengan menggunakan pasangan tag <FORM></FORM>. Dua atribut yang umum digunakan pada tag <FORM> berupa ACTION dan METHOD. 1. ACTION menentukan URL yang akan dijalankan dan menerima semua masukan pada formulir. Jika ACTION tidak disebutkan , informasi akan dikirimkan ke URL yang sama dengan halaman web itu sendiri. 2. METHOD digunakan untuk menentukan bagaimana informasi dikirim ke URL yang disebutkan dalam ACTION. Nilai umum untuk atribut ini berupa GET dan POST. Contoh penggunaan tag <FORM> dan </FORM>: <FORM ACTION=”info.html” METHOD=”POST”> … </FORM> B. Memasukkan DATA dengan INPUT Tag <INPUT> digunakan untuk melakukan pemasukkan data dan letaknya berada dalam pasangan tag <FORM> dan </FORM>. Ada bermacam-macam tipe pemasukan data, atara lain berupa teks, kotak password, tombol radio, kotak cek, serta tombol SUBMIT dan RESET. Tipe Submit Untuk membuat button control. Komponen ini memiliki atribute: Name = Nama dari control Size = Ukuran control DIPANEGARA COMPUTER CLUB 42 MODUL HTML DAN JAVASCRIPT Type Value = <input type=”button”> = Untuk memberikan value ke input Tipe Password Untuk membuat line password. Password memiliki atribut: Name = nama dari control Size = ukuran control Type = <input type=”password”> Value = untuk memberikan value ke input Maxlenght = untuk menentukan maksimal karakter yang bisa dimasukkan Tipe Text Untuk membuat single line text control. Text memiliki atribut: Name = nama dari control Size = ukuran control Type = <input type=”text”> Maxlenght = untuk menentukan maksimal karakter yang bisa dimasukkan <INPUT TYPE=”TEXT” NAME=”textbox” VALUE=””SIZE=”20”> Tipe CheckBox Checkbox memiliki atribut: Checked = Untuk memberi default check Name = Nama dari control Size = ukuran control Type = <input type=”checkbox”> Value = untuk memberikan value ke input Tipe Radio Setiap radio button control harus memiliki nama yang sama, sehingga user hanya bisa memilih satu option saja. Radio button juga harus secara explisit memberikan nilai ke atribut value. Radio memiliki atribut: Checked = Untuk memberi default check DIPANEGARA COMPUTER CLUB 43 MODUL HTML DAN JAVASCRIPT Contoh 24: Name Size Type Value = Nama dari control = Ukuran control = <input type=”radio”> = Untuk memberikan value ke input 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan 2. Simpan dengan nama file latihan24.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 44 MODUL HTML DAN JAVASCRIPT C. Menggunakan Select Select sering digunakan sebagai daftar dalam sebuah tag <FORM>. Untuk isinya menggunakan tag <OPTION>..</OPTION>. SINTAKS : <SELECT NAME=”NamaSelect”> <OPTION> nilai 1</OPTION> <OPTION> nilai 2</OPTION> </SELECT> D. Menggunakan Textarea Textarea adalah sebuah kolomyang dibuat untuk menuliskan text yang lebih besar dibandingkan dengan <INPUT TYPE=”TEXT”> SINTAKS : <TEXTAREA NAME=”NamaTextarea” ROWS=”JmlBaris” COLS=”JmlKolom” > …. </TEXTAREA> E. Dasar Penggunaan Frame Frame memungkinkan satu halaman web atau lebih ditampilkan pada sebuah jendela browser. Halaman yang berbasis frame dibentuk dengan pasangan <FRAMESET> dan </FRAMESET>, atribut COLS untuk kolom dan ROWS untuk baris. Untuk mempraktikkan frame, buatlah dulu berkas bernama kiri.html dan kanan.html berikut ini: File kiri.html DIPANEGARA COMPUTER CLUB 45 MODUL HTML DAN JAVASCRIPT File kanan.html Contoh 25: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan 2. Simpan dengan nama file latihan25.html. DIPANEGARA COMPUTER CLUB 46 MODUL HTML DAN JAVASCRIPT 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. File atas.html Contoh 26: 1. Ketiklah List yang ada dibawah ini notepad dengan menggunakan DIPANEGARA COMPUTER CLUB 47 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan26.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 48 MODUL HTML DAN JAVASCRIPT BAB 5 JAVASCRIPT Setelah anda memahami struktur HTML, sekarang kita akan melihat bagaimana susunan JavaScript. Susunan JavaScript adalah lanjutan dari susunan HTML yaitu javascript ditanamkan ke dalam badan HTML. A. Struktur Javascript Struktur dari Javascript adalah sebagai berikut : <SCRIPT LANGUAGE-“Javascript”> Penulisan kode Javascript </SCRIPT> B. Penggunaan Variabel Var yang merupakan singkatan dari variabel adalah suatu tempat/wadah untuk menampung suatu nilai yang dapat berubahubah. Contoh : Var x = 10 Var a = 4*5+6-7 Var nama =”stmik” C. Penggunaan ( document.write ) Perintah document.write adalah perintah untuk mencetak hasil ke layar (perintah ini sama dengan perintah PRINT dalam Basic atau WRITE dalam turbo pascal). document.write(“Tesk Yang Akan Dicetak”) Contoh 27: 1. Ketiklah List yang ada dibawah ini Editplus dengan menggunakan DIPANEGARA COMPUTER CLUB 49 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan27.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. D. Penggunaan Prompt Perintah prompt adalah perintah untuk menampilkan kotak dialog log Web Browser User Prompt. prompt(‘Pesan : ’,’Keterangan untuk pengguna’) DIPANEGARA COMPUTER CLUB 50 MODUL HTML DAN JAVASCRIPT Contoh 28: 1. Ketiklah List yang ada dibawah ini Editplus dengan menggunakan 2. Simpan dengan nama file latihan28.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 51 MODUL HTML DAN JAVASCRIPT E. Penggunaan Alert Dan Confirm Perintah alert adalah perintah untuk menampilkan kotak dialog web browser untuk menyampaikan pesan peringatan. Sedangkan perintah confirm umumnya digunakan untuk menampilkan kotak dialog penegasan. Contoh 29 (Alert): 1. Ketiklah List yang ada dibawah ini Editplus dengan menggunakan DIPANEGARA COMPUTER CLUB 52 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan29.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. Setelah diklik OK DIPANEGARA COMPUTER CLUB 53 MODUL HTML DAN JAVASCRIPT Contoh 30 (Confirm): 1. Ketiklah List yang ada dibawah ini Editplus dengan menggunakan 2. Simpan dengan nama file latihan30.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 54 MODUL HTML DAN JAVASCRIPT Setelah diklik OK F. Penggunaan Seleksi Seleksi berguna untuk mengecek apakah suatu kondisi bernilai benar atau bernilai salah. 1. Penggunaan If SINTAKS : If (kondisi){ Kode yang akan dijalankan jika kondisi benar }else{ Kode yang akan dijalankan jika kondisi salah } DIPANEGARA COMPUTER CLUB 55 MODUL HTML DAN JAVASCRIPT Contoh 31: 1. Ketiklah List yang ada dibawah ini Editplus dengan menggunakan 2. Simpan dengan nama file latihan31.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 56 MODUL HTML DAN JAVASCRIPT 2. Penggunaan Switch SINTAKS : switch(ekspresi){ case kondisi1 : kode yg dijalankan jika kondisi1 benar; break; case kondisi2 : kode yg dijalankan jika kondisi2 benar; break; default : Kode yg dijalankan jika semua kondisi salah; break; } Contoh 32: 1. Ketiklah List yang ada dibawah ini Editplus dengan menggunakan 2. Simpan dengan nama file latihan32.html. DIPANEGARA COMPUTER CLUB 57 MODUL HTML DAN JAVASCRIPT 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 58 MODUL HTML DAN JAVASCRIPT BAB 6 JAVASCRIPT LANJUTAN A. Penggunaan ( for ) Perintah for yaitu perintah untuk melakukan pengulangan. Perintah ini sama dengan perintah for dalam bahasa pemrogramaman Basic, Pascal atau C. SINTAK : for (nilai awal ; nilai akhir ; kenaikan atau penurunan) { Blok perintah yang akan diulang. } Contoh 33: 1. Ketiklah List yang ada dibawah ini Editplus dengan menggunakan DIPANEGARA COMPUTER CLUB 59 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan33.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. Sama seperti bahasa C, di dalam javascript juga terdapat perulangan while dan do..while yang penggunaanya juga hampir sama dengan bahasa C, namun penulis hanya membahas tentang for tidak membahas lebih jauh tentang perulangan while dan do..while. B. Penggunaan ( new array) Perintah new Array adalah perintah untuk memasukkan sekumpulan data ke dalam sebuah variable (data disimpan dalam variable yang sama secara berurut). Contohnya apabila kita ingin membuat tanggal di web kita. Contoh 34: 1. Ketiklah List yang ada dibawah ini Editplus dengan menggunakan DIPANEGARA COMPUTER CLUB 60 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan34.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. C. Membuat Aplikasi Javascript (Pop up Window) Secara sederhana pop-up window dapat diartikan window tambahan yang muncul mengiringi window utama. Misalnya kita DIPANEGARA COMPUTER CLUB 61 MODUL HTML DAN JAVASCRIPT mengunjugi suatu website tetapi juga muncul window lainnya setelah window utama muncul. Metode ini banyak dimanfaatkan untuk membuat sebuah iklan. Buat file utama.html Contoh 35: 1. Ketiklah List yang ada dibawah ini Editplus dengan menggunakan DIPANEGARA COMPUTER CLUB 62 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan35.html. 3. Kemudian untuk menampilkan anda dapat membuka web browser seperti firefox Moozilla, internet explorer, google chrome dsb. 4. Berikut hasil tampilan pada web browser. DIPANEGARA COMPUTER CLUB 63 MODUL HTML DAN JAVASCRIPT Lalu akan otomatis muncul tampilan seperti berikut DIPANEGARA COMPUTER CLUB
