BAB 1 PENGENALAN HTML

1 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 : notepad

2 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan1.html. 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.

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

4 MODUL HTML DAN JAVASCRIPT Contoh 2: notepad 2. Simpan dengan nama file latihan2.html. D. Tag Dalam HTML 1. Tag <BR> Fungsi tag <BR> adalah untuk membuat baris baru atau berpindah baris.

5 Contoh 3: notepad 2. Simpan dengan nama file latihan3.html. 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.

6 MODUL HTML DAN JAVASCRIPT Contoh 4: LEFT, mengatur teks rata kiti terhadap halaman. RIGHT, mengatur teks rata kanan terhadap halaman. JUSTIFY, mengatur teks rata kiri dan rata kanan. notepad 2. Simpan dengan nama file latihan4.html.

7 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: notepad 2. Simpan dengan nama file latihan5.html.

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

9 2. Simpan dengan nama file latihan6.html. 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

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: notepad 2. Simpan dengan nama file latihan7.html.

11 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: notepad

12 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan8.html.

13 Latihan 1. Buatlah listing sesuai dengan tampilan di bawah ini :

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: notepad 2. Simpan dengan nama file latihan9.html.

15 Contoh 10: Ukuran Font Untuk menentukan ukuran fontn ditentukan oleh atribut SIZE. notepad 2. Simpan dengan nama file latihan10.html.

16 MODUL HTML DAN JAVASCRIPT Warna Font Atribut pada tag <FONT> yang berkaitan dengan warna teks yaitu COLOR, yang berguna untuk menentukan warna dari font tersebut. Contoh 11: notepad

17 2. Simpan dengan nama file latihan11.html. 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

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 MIDDLE BOTTOM LEFT RIGHT Keterangan Teks diletakkan di bagian atas Teks diletakkan di tengah tengah Merupakan nili default. Teks diletakkan di bagian bawah Gambar diletakkan di sebelah kiri pada halaman 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: notepad

19 2. Simpan dengan nama file latihan12.html.

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: notepad 2. Simpan dengan nama file latihan13.html.

21 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 : Keterangan <A HREF= URL TARGET= VALUE >NAMA LINK </A> o < a <! - - tag anchor- - > o href<! - - atribut - - > o url<! - - alamat tujuan - - > o target<! - - target tampilan link - - > o nama link <! - - namalink yg dibuat - - >

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.

23 Contoh 14: notepad 2. Simpan dengan nama file latihan14.html.

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 : Contoh 15: <A Href= http://www.google.com >Google</a> notepad 2. Simpan dengan nama file latihan15.html.

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

26 MODUL HTML DAN JAVASCRIPT Contoh 16: notepad 2. Simpan dengan nama file latihan16.html.

28 MODUL HTML DAN JAVASCRIPT Link Ke Email Mailtom merupakan link ke email. <A href= mailto:adhi.dp@gmail.com?subject= Bagi Ilmu > Kirim email </A>

29 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

30 MODUL HTML DAN JAVASCRIPT Nilai Keterangan pengganti nomor urut i Angka romawi dengan huruf kecil digunakan sebagai pengganti nomor urut 1 Angka biasa digunakan sebagai penomoran. Merupakan nilai default kalau TYPE tidak disebutkan. Contoh 17: notepad 2. Simpan dengan nama file latihan17.html.

31 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: notepad

33 Contoh 19: notepad 2. Simpan dengan nama file latihan18.html.

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

35 2. Simpan dengan nama file latihan20.html. 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 Contoh 21: Untuk menambahkan warna latar belakang table, digunakan atribut BGCOLOR pada tag <TABLE>. notepad

37 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: notepad

39 5. Menggabungkan sel Tabel Contoh 23: 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>. notepad

40 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan23.html. Latihan 3. Buatlah listing sesuai dengan tampilan di bawah ini :

41 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

42 MODUL HTML DAN JAVASCRIPT Type = <input type= button > Value = 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

43 Name = Nama dari control Size = Ukuran control Type = <input type= radio > Value = Untuk memberikan value ke input Contoh 24: notepad 2. Simpan dengan nama file latihan24.html.

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

45 File kanan.html Contoh 25: notepad 2. Simpan dengan nama file latihan25.html.

46 MODUL HTML DAN JAVASCRIPT File atas.html Contoh 26: notepad

47 2. Simpan dengan nama file latihan26.html.

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

49 2. Simpan dengan nama file latihan27.html. D. Penggunaan Prompt Perintah prompt adalah perintah untuk menampilkan kotak dialog log Web Browser User Prompt. prompt( Pesan :, Keterangan untuk pengguna )

50 MODUL HTML DAN JAVASCRIPT Contoh 28: Editplus 2. Simpan dengan nama file latihan28.html.

51 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): Editplus

52 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan29.html. Setelah diklik OK

53 Contoh 30 (Confirm): Editplus 2. Simpan dengan nama file latihan30.html.

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 }

55 Contoh 31: Editplus 2. Simpan dengan nama file latihan31.html.

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: } Editplus 2. Simpan dengan nama file latihan32.html.

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

59 2. Simpan dengan nama file latihan33.html. 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: Editplus

60 MODUL HTML DAN JAVASCRIPT 2. Simpan dengan nama file latihan34.html. C. Membuat Aplikasi Javascript (Pop up Window) Secara sederhana pop-up window dapat diartikan window tambahan yang muncul mengiringi window utama. Misalnya kita

61 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: Editplus

63 Lalu akan otomatis muncul tampilan seperti berikut