1 / 47

PEMROGRAMAN WEB

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

vlora
Download Presentation

PEMROGRAMAN WEB

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 <OL> dan diakhiri </OL>. Untuk menyatakan tiap bagiannya digunakan tag <LI> dimana tag ini tidak menggunakan penutup.

  3. CONTOH <HTML> <HEAD> <TITLE>Ordered List</TITLE> </HEAD> <BODY> Empat besar pemain termahal di dunia <OL> <LI>Luis Figo <LI>Hernan Crespo <LI>Christian Vieri <LI>Nicolas Anelka </OL> </BODY> </HTML>

  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 <OL> • 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 : <HTML> <HEAD> <TITLE>OL dengan atribut</TITLE> </HEAD> <BODY> <OL TYPE=A> <LI>Daftar empat pemain termahal dunia <OL TYPE=I> <LI>Luis Figo <LI>Hernan Crespo <LI>Christian Vieri <LI>Nicolas Anelka </OL> <LI>Urutan lima sampai delapan <OL TYPE=1 START=5> <LI>Denilson <LI>Gebriel Batigol <LI>Ronaldo <LI>Amoroso </OL> </OL> </BODY> </HTML>

  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 <UL> dan tag akhir </UL>. Sama seperti ordered list, untuk tiap-tiap bagian digunakan <LI> tanpa tag penutup. • Selain default tanda bullet, anda bisa menggunakan tanda cakram/disk, lingkaran, atau kotak. Caranya dengan menggunakan atribut TYPE pada tag <UL>.

  10. Contoh 1 <HTML> <HEAD> <TITLE>Unordered List</TITLE> </HEAD> <BODY> Empat besar Seri-A Liga Indonesia <UL> <LI>PSM Makassar <LI>Pupuk Kaltim <LI>Persikota <LI>Persija Pusat </UL> </BODY> </HTML>

  11. Hasil

  12. Contoh 2 <HTML> <HEAD> <TITLE>UL dengan atribut</TITLE> </HEAD> <BODY> Klub sepakbola di Jawa Timur <UL TYPE=square> <LI>Mitra Surabaya <LI>Persebaya <LI>Persija Jember <LI>Persija Pusat </UL> </BODY> </HTML>

  13. Hasil 2

  14. Grafik dalam Halaman Web • Biasanya orang menggunakan gambar untuk memperindah situsnya. HTML menyediakan tag <IMG> 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: <IMG SRC = “file_gambar” ALT = "nama_alternalif"> • 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 <HTML> <HEAD> <TITLE>Grafik dalam halaman web</TITLE> </HEAD> <BODY =‘’logokamps.jpg’’> <P ALIGN=”left”>www.kamps.com</P> <P ALIGN=”left”><IMG SRC=”logokamps.JPG” ALT=”Keluarga Angin Mammiri Pascasarjana Jogjakarta SUL-SEL”></P> </BODY> </HTML>

  16. Hasil

  17. Grafik dalam Halaman Web • Beberapa atribut pada tag <IMG> 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 <HTML> <HEAD> <TITLE>Atribut IMG</TITLE> </HEAD> <BODY> <P>UIN Alauddin Makassar, VSPACE = 20 <BR> <IMG SRC="logokamps.JPG" WIDTH="270" HEIGTH="70" ALT="radiokampus ITB" BORDER="2" HSPACE="20" VSPACE="20"> <BR> www.UIN.com, HSPACE=20</P> <P>Jl.Alauddin Kab.Gowa<IMG SRC="logokamps.JPG" WIDTH="203“ HEIGHT="60" ALT="Kamps" HSPACE="20">Makassar,HSPACE=20 <BR> </P> </BODY> </HTML>

  19. Hasil

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

  21. Contoh : <HTML> <HEAD> <TITLE>Tabel</TITLE> </HEAD> <BODY> <TABLE Border=1> <CAPTION> Seputar Calciomeecato</CAPTION> <TR> <TH>Nama Klub</TH> <TH>Berita</TH> </TR> <TR> <TD>Juventus</TD> <TD>Juventus mendatangkan Iaquinta untuk menggantikan striker raksasa Ibrahimovic </TD> </TR> <TR> <TD>Lazio</TD> <TD>Lazio menjadi klub dengan rekor pembelian pemain sebesar 240 miliar lira ! </TD> </TR> <TR> <TD>Perugia</TD> <TD>Ahn Jung-Whan resmi menjadi pemain pinjaman Perugia</TD> </TR> <TR> <TD>Udinese</TD> <TD>Pemain Spanyol berusia 23 tahun,Luis Helguera menjadi pemain Udinese<BR> dengan transfer senilai 349 JUTA LIRA </TD> </TR> </TABLE> </BODY> </HTML>

  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 <HTML> <HEAD> <TITLE>Tabel dengan WIDTH dan ALIGN</TITLE> </HEAD> <BODY> <TABLE WIDTH=’’88%’’ HEIGHT=’’210’’> <TR> <TD WIDTH=’’30%’’ HEIGHT=’’110’’ VALIGN=’’top’’>Lihatlah VALIGN=&quot;top&quot;<br> Janganlah merasa malu mempelajari sesuatu yang tidak diketahuinya</TD> <TD WIDTH=’’30%’’ HEIGHT=’’110’’ VALIGN=’’middle’’>Bandingkan dengan VALIGN=&quot;middle &quot;<br> </TD> <TD WIDTH=’’30%’’ HEIGHT=’’110’’ VALIGN=’’bottom’’>bagaimana dengan ini VALIGN =&quot;bottom&quot;<TD> </TR> <TR> <TD WIDTH=’’30%’’ HEIGHT=’’100’’ ALIGN=”left’’>kalo ini ALIGN=&quot;left&quot;</TD> <TD WIDTH=’’34%’’ HEIGHT=’’100’’ ALIGN=’’center’’>ALIGN=&quot;center&quot;</TD> <TD WIDTH=’’36%’’ HEIGHT=’’100’’ ALIGN=”right’’>Dunia diciptakan untuk semua makhluk, bukan untuk kepentingan duniaitu sendiri, dan ini dengan ALIGN = &quot;right&quot;</TD > </TR> </TABLE> </BODY> </HTML>

  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 <HTML> <HEAD> <TITLE>Tabel dengan CELLSPACING dan CELLPADDING</TITLE> </HEAD> <BODY> <TABLE BORDER=’’3’’ CELLPADDING=’’5’’ CELLSPACING=’’5’’ WIDTH=’’85%’’> <TR> <TD WIDTH=’’43%’’>baris 1, kolom 1</TD> <TD WIDTH=’’57%’’>baris 1, kolom 2</TD> </TR> <TR> <TD WIDTH=’’43%’’>baris 2, kolom 1</TD> <TD WIDTH=’’57%’’>baris 2, kolom 2</TD> </TR> </TABLE> </BODY> </HTML>

  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 <HTML> <HEAD> <TITLE>Tabel dengan ROWSPAN dan COLSPAN</TITLE> </HEAD> <BODY> <TABLE BORDER=’’3’’ CELLPADDING=’’5’’ CELLSPACING=’’5’’ WIDTH=’’85%’’> <TR> <TD WIDTH=’’43%’’ ROWSPAN=’’2’’>baris 1, kolom1<P> baris 2,kolom 1</TD> <TD WIDTH=’’57%’’>baris 1, kolom 2</TD> </TR> <TR> <TD WIDTH=’’57%’’>baris 2, kolom 2</TD> </TR> <TR> <TD WIDTH=’’100%’’ ROWSPAN=’’2’’>baris 3, kolom1<P> baris 3,kolom 2</TD> </TR> </TABLE> </BODY> </HTML>

  31. Hasil

  32. TableCOLOR • Anda bisa rnemberi wama pada tabel. Selain warna latar belakang, bolder tabel bisa jugaditentukan warnanya. Untuk latar belakang digunakan atribut BGCOLOR, sedangkan untuk memberi warna pada border gunakan atribut BORDERCOLOR.

  33. Contoh <HTML> <HEAD> <TITLE>Tabel dengan ROWSPAN dan COLSPAN</TITLE> </HEAD> <BODY> <TABLE BORDER=’’3’’ CELLPADDING=’’3’’ CELLSPACING=’’5’’ WIDTH=’’100%’’ BORDERCOLOR=’’#FF0000’’> <TR> <TD WIDTH=’’50%’’BGCOLOR=’#’808080’’>&nbsp;</TD> <TD WIDTH=’’50%’’>&nbsp;</TD> </TR> <TR> <TD WIDTH=’’50%’’>&nbsp;</TD> <TD WIDTH=’’50%’’BGCOLOR=’’#808080’’>&nbsp;</TD> </TR> </TABLE> <TABLE BORDER=’’3’’ CELLPADDING=’’3’’ CELLSPACING=’’5’’ WIDTH=’’100%’’ BORDERCOLORLIGHT=’’#008080’’ BORDERCOLORDARK=’’#800080’’> <TR> <TD WIDTH=’’100%’’>&nbsp;</TD> </TR> </TABLE> </BODY> </HTML>

  34. Hasil

  35. Form dan Input • Tag <FORM> dan <INPUT>digunakan bersama-sama untuk meminta masukan dari user untuk kemudian dikirim ke server. Tag <FORM> membuat kerangkanya sedangkan tag <INPUT> 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: <FORM METHOD = "POST/GET’’ ACTION = "URL"> ……………… ……………… </FORM> • 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 <INPUT> 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 <HTML> <HEAD> <TITLE>Form Input dengan Text box</TITLE> </HEAD> <BODY> <P>Rancangan awal BUKU TAMU </P> <TABLE BORDER=’’0’’ CELLPADDING=’’0’’ CELLSPACING=’’2’’> <TR> <TD WIDTH=’’11%’’>Nama</TD> <TD WIDTH=’’3%’’>:</TD> <TD WIDTH=’’86%’’><INPUT TYPE=”text’’ NAME=’’nama’’ SIZE=’’20’’></TD> </TR> <TR> <TD WIDTH=’’11%’’>Alamat </TD> <TD WIDTH=’’3%’’>:</TD> <TD WIDTH=’’86%’’><INPUT TYPE=”text’’ VALUE=’’JEMBER’’ NAME=’’alamat’’ SIZE=’’20’’></TD> </TR> < TR> <TD WIDTH=’’11%’’>Sekolah</TD> <TD WIDTH=’’3%’’>:</TD> <TD WIDTH=’’86%’’><INPUT TYPE=”text’’ NAME=’’sekolah’’ SIZE=’’20’’></TD> </TR> </TABLE> </BODY> </HTML>

  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 <HTML> <HEAD> <TITLE>From Input dengan Check box</TITLE> </HEAD> <BODY> <P>Pilih yang anda suka</P> <P>Daftar jurusan</P> <P> <INPUT TYPE=’’checkbox’’ NAME=’’C1’’CHECKED>Teknik Elektro<BR> <INPUT TYPE=’’checkbox’’ NAME=’’C2’’ >Pertanian<BR> <INPUT TYPE=’’checkbox’’ NAME=’’C3’’ >Kedokteran<BR> <INPUT TYPE=’’checkbox’’ NAME=’’C4’’ >Teknik Informatika </P> </BODY> </HTML>

  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 <HTML> <HEAD> <TITLE>From Input dengan Radio box</TITLE> </HEAD> <BODY> <P>Pilih salah satu</P> <P>usia anda </P> <P> <INPUT TYPE=’’radio’’ VALUE=’’V1’’ CHECKED NAME=’’R1’’><15Tahun<BR> <INPUT TYPE=’’radio’’ VALUE=’’V2’’ NAME=’’R1’’>15-19 Tahun<BR> <INPUT TYPE=’’radio’’ VALUE=’’V3’’ NAME=’’R1’’>19-25 Tahun<BR> <INPUT TYPE=’’radio’’ VALUE=’’V4’’ NAME=’’R1’’>25-35 Tahun<BR> <INPUT TYPE=’’radio’’ VALUE=’’V5’’ NAME=’’R1’’> >35 Tahun<BR> </P> </BODY> </HTML>

  44. Hasil

  45. FormSUBMIT 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 <HTML> <HEAD><TITLE>BUKU TAMU </TITLE></HEAD> <BODY> <H3><P ALIGN=’’center’’>BUKU TAMU</P></H3> <FORM METHOD=’’POST’’ ACTION=’’thanks.html’’> <TABLE BORDER=’’0’’ CELLPADDING=’’2’’ WIDTH=’’100%’’ <TR> <TD WIDTH=’’8%’’>Nama</TD> <TD WIDTH=’’4%’’>:</TD> <TD WIDTH=’’88%’’><INPUT TYPE=”text’ NAME=’’alamat’’ SIZE=’’20’’></TD> </TR> <TR> <TD WIDTH=’’8%’’>Asal</TD> <TD WIDTH=’’4%’’>:</TD> <TD WIDTH=’’88%’’><INPUT TYPE=”text’ NAME=’’asal’’ SIZE=’’20’’></TD> </TR> <TR> <TD WIDTH=’’8%’’>Email</TD> <TD WIDTH=’’4%’’>:</TD> <TD WIDTH=’’88%’’><INPUT TYPE=”text’ NAME=’’email’’ SIZE=’’20’’></TD> </TR> <TR> <TD WIDTH=’’8%’’ VALIGN=’’top’’>Homepageku</TD> <TD WIDTH=’’4%’’ VALIGN=’’top’’>:</TD> <TD WIDTH=’’88%’’><INPUT TYPE=’’radio’’ VALUE=’’V1’’ CHECKED NAME=’’R1’’>Bagus sekali <BR> <INPUT TYPE=’’radio’’ VALUE=’’V2’’ NAME=’’R1’’>Bagus<BR> <INPUT TYPE=’’radio’’ VALUE=’’V3’’ NAME=’’R1’’>Biasa saja<P>&nbsp;</TD> </TR> </TABLE> <P><INPUT TYPE=’’submit’’ VALUE=’’Kirim’’ NAME=’’B1’’> <INPUT TYPE=’’reset’’ VALUE=’’Batal’’ NAME=’’B2’’></P> </FORM> </BODY> </HTML>

  47. Hasil

More Related