PEMROGRAMAN WEB HTML LANJUT BY : ABD.WAHID YUNUS TI UIN ALAUDDIN MAKASSAR.

Presentasi berjudul: "PEMROGRAMAN WEB HTML LANJUT BY : ABD.WAHID YUNUS TI UIN ALAUDDIN MAKASSAR."— Transcript presentasi:

1 PEMROGRAMAN WEB HTML LANJUT BY : ABD.WAHID YUNUS TI UIN ALAUDDIN MAKASSAR

2 Ordered List Ordered List digunakan untuk membuat daftar dimana tiap bagiannya memiliki nomor secara berurut. Ordered List dimulai dengan menggunakan tag dan diakhiri. Untuk menyatakan tiap bagiannya digunakan tag dimana tag ini tidak menggunakan penutup.

3 CONTOH Ordered List Empat besar pemain termahal di dunia Luis Figo Hernan Crespo Christian Vieri Nicolas Anelka

4 HASIL

5 Ordered List Ketika menggunakan perintah ordered list maka default penomoran adalah 1,2,3,…………., anda bisa mengubah nomor tersebut menggunakan atribut TYPE pada tag TYPE = 1; daftar berurut dengan nomor 1,2,3 (defaut) TYPE I ; daftar berurut dengan menggunakan bilangan Romawi Besar (I,II,III,IV,....) TYPE i ; daftar berurut dengan menggunakan bilangan Romawi Kecil (i,ii,iii,iv,.......) TYPE A ; daftar berurut dengan menggunakan abjad besar ( A, B, C,.......) TYPE a ; daftar berurut dengan menggunakan abjad kecil ( a, b, c,.......)

6 Ordered List Selain mengubah jenis penomoran,HTML juga menyediakan perintah untuk menentukan nilai awalpenomoran. Atribut yang digunakan adalah START = n, dimana n adalah nilai awal penomoran.

7 Contoh : OL dengan atribut Daftar empat pemain termahal dunia Luis Figo Hernan Crespo Christian Vieri Nicolas Anelka Urutan lima sampai delapan Denilson Gebriel Batigol Ronaldo Amoroso

8 Hasil

9 Unordered List Berbeda dengan Ordered List, dalam unordered list tidak dijumpai urutan dalam suatu daftar. Setiap bagian dari unordered list ditandai dengan tanda bullet. Tanda bullet menjadi default dalam unordered list.Untuk membuat daftar dengan tanda ini digunakan tag awal dan tag akhir. Sama seperti ordered list, untuk tiap-tiap bagian digunakan tanpa tag penutup. Selain default tanda bullet, anda bisa menggunakan tanda cakram/disk, lingkaran, atau kotak. Caranya dengan menggunakan atribut TYPE pada tag.

10 Contoh 1 Unordered List Empat besar Seri-A Liga Indonesia PSM Makassar Pupuk Kaltim Persikota Persija Pusat

11 Hasil

12 Contoh 2 UL dengan atribut Klub sepakbola di Jawa Timur Mitra Surabaya Persebaya Persija Jember Persija Pusat

13 Hasil 2

14 Grafik dalam Halaman Web Biasanya orang menggunakan gambar untuk memperindah situsnya. HTML menyediakan tag untuk menampilkan gambar dalam halaman web. Dari berbagai macam format gambar ada, hanya beberapa saja yang bisa dipergunakan dalam membuat halaman web. Format gambar yang paling sering digunakan adalah GIF dan JPEG Format penulisannya adalah: Atribut SRC digunakan untuk menentukan sumber gambar Atribut ALT berfungsi sebagai teks pengganti gambar untuk browser yang tidak bisa mendukung grafik, atau pada pihak client sengaja mematikan fasilitas pemanggilan gambar.

15 Contoh Grafik dalam halaman web www.kamps.com

16 Hasil

17 Grafik dalam Halaman Web Beberapa atribut pada tag yang biasa digunakan dalam halaman-halaman web.  BORDER : memberikan suatu border atau batas pada gambar, default-nya = 0  HEIGHT, WIDTH : menentukan tinggi dan lebar suatu gambar dalam ukuran pixel  HSPACE, VSPACE : menentukan jarak spasi horizontal dan spasi vertikal antara gambar-gambar denqan objek di sekitarya  ALIGN : mengatur peralatan gambar terhadap ob|ek di sekelilingnya. Nilainya bisa berupa LEFT, CENTER, RIGHT, BOTTOM, TOP dan MIDDLE

18 Contoh Atribut IMG UIN Alauddin Makassar, VSPACE = 20 www.UIN.com, HSPACE=20 Jl.Alauddin Kab.Gowa Makassar,HSPACE=20

19 Hasil

20 TABLE Tabel banyak digunakan karena dapat menampilkan informasi dalam bentuk yang ringkas dan mudah dibaca. Untuk membuat tabel digunakan tag awal mewakili beberapa bagian penting, yaitu :  …….. digunakan untuk membentuk judul tabel.Judul tabel ini akan terletak diluar tabel, bisa dibagian atas atbagian bawah tabel;  …….. berfungsi untuk meletakkan judul tabel dibagian paling atas atau paling kiri dari suatu tabel;  ……. digunakan sebagai tempat menulis data atau informasi dalam tabel.

21 Contoh : Tabel Seputar Calciomeecato Nama Klub Berita Juventus Juventus mendatangkan Iaquinta untuk menggantikan striker raksasa Ibrahimovic Lazio Lazio menjadi klub dengan rekor pembelian pemain sebesar 240 miliar lira ! Perugia Ahn Jung-Whan resmi menjadi pemain pinjaman Perugia Udinese Pemain Spanyol berusia 23 tahun,Luis Helguera menjadi pemain Udinese dengan transfer senilai 349 JUTA LIRA

22 Hasil

23 Table ALIGN dan WIDTH Peralatan horizontal tabel menggunakan atribut ALIGN. ALIGN dapat bernilai LEFT untuk peralatan kiri, CENTER untuk peralatan tengah dan RIGHT untuk peralatan di kanan. Sedangkan untuk peralatan vertikal menggunakan atribut VALIGN. VALIGN dapat bernilai TOP untuk peralatan atas,MIDDLE untuk peralatan ditengah dan BOTTOM untuk peralatan di bawah. Lebar tabel biasanya diatur menggunakan atribut WIDTH. Nilai WIDTH dapat dinyatakan dengan persen (%) yang menyatakan lebar tabel dalam persentase atau dinyatakan dengan pixel yang berarti ukuran sesungguhnya dari tabel.

24 Contoh Tabel dengan WIDTH dan ALIGN Lihatlah VALIGN="top" Janganlah merasa malu mempelajari sesuatu yang tidak diketahuinya Bandingkan dengan VALIGN="middle " bagaimana dengan ini VALIGN ="bottom" kalo ini ALIGN="left" <TD WIDTH=’’34%’’ HEIGHT=’’100’’ ALIGN=’’center’’>ALIGN="center" Dunia diciptakan untuk semua makhluk, bukan untuk kepentingan duniaitu sendiri, dan ini dengan ALIGN = "right"

25 Hasil

26 Table CELLSPACING dan CELLPADDING Atribut CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat diantara dua buah sel. CELLPADDING berfungsi untuk mengatur jumlah spasi yang terdapat diantara batas/border dengan isi atau teks didalam sel tersebut.

27 Contoh Tabel dengan CELLSPACING dan CELLPADDING baris 1, kolom 1 baris 1, kolom 2 baris 2, kolom 1 baris 2, kolom 2

28 Hasil

29 Table COLSPAN dan ROWSPAN Atribut COLSPAN digunakan untuk menghubungkan beberapa kolom menjadi satu kolom. Sedangkan ROWSPAN digunakan un;uk menggabungkan beberapa baris menjadi satu.

30 Contoh Tabel dengan ROWSPAN dan COLSPAN baris 1, kolom1 baris 2,kolom 1 baris 1, kolom 2 baris 2, kolom 2 baris 3, kolom1 baris 3,kolom 2

31 Hasil

32 Table COLOR Anda bisa rnemberi wama pada tabel. Selain warna latar belakang, bolder tabel bisa juga ditentukan warnanya. Untuk latar belakang digunakan atribut BGCOLOR, sedangkan untuk memberi warna pada border gunakan atribut BORDERCOLOR.

33 Contoh Tabel dengan ROWSPAN dan COLSPAN <TABLE BORDER=’’3’’ CELLPADDING=’’3’’ CELLSPACING=’’5’’ WIDTH=’’100%’’ BORDERCOLORLIGHT=’’#008080’’ BORDERCOLORDARK=’’#800080’’>

34 Hasil

35 Form dan Input Tag dan digunakan bersama-sama untuk meminta masukan dari user untuk kemudian dikirim ke server. Tag membuat kerangkanya sedangkan tag menyediakan elemen antar muka dengan user. Anda terlalu sering menjumpai situs yang menyediakan buku tamu bagi pengunjungnya. Formulir tersebut dibuat dengan menggunakan elemen form dan input. Standar penulisan form adalah: ……………… Atribut METHOD memiliki dua nilai POST dan GET. Metode GET mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL (Uniform Resources Locator) yang ditunjuk. Metode POST mengirimkan datanya secara terpisah. Jika data masuk banyak, lebih disarankan untuk menggunakan metode POST. Atribut ACTION berisi URL dari program yang dipanggil oleh form tersebut.

36 Form TEXTBOX Textbox merupakan salah satu jenis kontrol untuk memasukkan data. HTML menyediakan tag dengan atribut TYPE=’’text’’ untuk membuat kotak input. JikaTYPE diberi nilai tersebut, atribut VALUE untuk memberi nilai suatu input, dan atribut SIZE untuk menentukan batas terpanjang sebuah masukan. Nilai VALUE juga menjadi tulisan yang tampak pada browser. Anda bisa menyembunyikan masukan yang ditulis user dengan memberi TYPE=’’password’’. Masukan akan menjadi karakter ‘’*’’.

37 Contoh Form Input dengan Text box Rancangan awal BUKU TAMU Nama : Alamat : Sekolah :

38 Hasil

39 Form CHECKBOX Selain atribu TYPE bernilai text dan password, Anda bisa memberi nilai atribut TYPE dengan Checkbox yang digunakan untuk memberi user pilihan. Dengan menggunakan checkbox, user bisa memilihsalahsatu pilihan, lebih dari satu pilihan, atau tidak memilih semua pilihan.

40 Contoh From Input dengan Check box Pilih yang anda suka Daftar jurusan Teknik Elektro Pertanian Kedokteran Teknik Informatika

41 Hasil

42 Form RADIO BUTTON Jika atribut TYPE=’’checkbox’’diganti dengan TYPE=’’radio’’, maka user harus memilih salah satu pilihan yang tersedia.User tidak bisa memilih kurang atau lebih darisatupilihan. Atribut CHECKED memberi tanda bahwa pilihan tersebut sedang diaktifkan.

43 Contoh From Input dengan Radio box Pilih salah satu usia anda 15-19 Tahun 19-25 Tahun 25-35 Tahun >35 Tahun

44 Hasil

45 Form SUBMIT dan RESET Setiap form harus memiliki minimal tombol submit atau tombol reset. Lebih baik jika keduanya digunakan bersama. Kedua tombal diatas dibuat dengan menggunakan atribut TYPE=’’submit’’ dan dan TYPE="reset". Tombol submit digunakan ketika user telah selesai mengisi formulir dan ingin mengirimkan ke server. Sedangkan tombol reset digunakan ketika user ingin menghapus semua rnasukkan yang telah ditulis.

46 Contoh BUKU TAMU BUKU TAMU <TABLE BORDER=’’0’’ CELLPADDING=’’2’’ WIDTH=’’100%’’ Nama : Asal : Email : Homepageku : Bagus sekali Bagus Biasa saja

47 Hasil