pemrograman web

PEMROGRAMAN WEB

HTML LANJUT

BY : ABD.WAHID YUNUS

TI UIN ALAUDDIN MAKASSAR

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.

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>

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

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.

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>

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

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>

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>

Hasil 2

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.

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>

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

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>

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.

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>

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.

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’’>LihatlahVALIGN="top"<br>

Janganlah merasa malu mempelajari sesuatu yang tidak diketahuinya</TD>

<TD WIDTH=’’30%’’ HEIGHT=’’110’’ VALIGN=’’middle’’>Bandingkan dengan VALIGN="middle "<br></TD>

<TD WIDTH=’’30%’’ HEIGHT=’’110’’ VALIGN=’’bottom’’>bagaimana dengan ini VALIGN="bottom"<TD></TR><TR>

<TD WIDTH=’’30%’’ HEIGHT=’’100’’ ALIGN=”left’’>kalo iniALIGN="left"</TD>

<TD WIDTH=’’34%’’ HEIGHT=’’100’’ALIGN=’’center’’>ALIGN="center"</TD><TD WIDTH=’’36%’’ HEIGHT=’’100’’ ALIGN=”right’’>Dunia diciptakan untuksemua makhluk, bukan

untuk kepentingan duniaitu sendiri, dan ini dengan ALIGN ="right"</TD >

</TR></TABLE></BODY></HTML>

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.

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>


Table COLSPAN dan ROWSPAN

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

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>

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.

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’’> </TD><TD WIDTH=’’50%’’> </TD>

</TR><TR>

<TD WIDTH=’’50%’’> </TD><TD WIDTH=’’50%’’BGCOLOR=’’#808080’’> </TD>

</TR></TABLE><TABLE BORDER=’’3’’ CELLPADDING=’’3’’ CELLSPACING=’’5’’ WIDTH=’’100%’’BORDERCOLORLIGHT=’’#008080’’BORDERCOLORDARK=’’#800080’’>

<TR><TD WIDTH=’’100%’’> </TD>


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.

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 ‘’*’’.

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>


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.

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>

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.

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>

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.

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

</TR> </TABLE><P><INPUT TYPE=’’submit’’ VALUE=’’Kirim’’ NAME=’’B1’’> <INPUT TYPE=’’reset’’ VALUE=’’Batal’’ NAME=’’B2’’></P></FORM></BODY></HTML>

pemrograman web

Documents