Pemrograman Eb

PEMROGRAMAN WEB
Pertemuan 4
UNIVERSITAS AMIKOM YOGYAKARTA

PRODI D3-TEKNIK INFORMATIKA
Oki Arifin, S.Kom., M.Cs.
TUJUAN
• Objectives (Tujuan Instruksional umum):
– Tag Image, Form, dan Table HTML
• Indikator Kompetensi
– Mampu mendefinisikan macam komponen
form dan fungsi table serta penggunaan
image
– Memahami tag-tag dan atribut tentang
images di HTML
– Memahami tag-tag dan atribut pembuatan
Form
– Memahami tag-tag dan atribut pembuatan
Table
IMAGE HTML
• Fungsi gambar dalam suatu web page
merupakan daya penarik bagi pengunjung
website.
• Dengan penambahan gambar maka akan
mengakibatkan semakin bertambah besarnya
penggunaan byte dari dokumen dari HTML,
yang secara otomatis akan berakibat terhadap
kinerja atau memperlambat waktu tampil
dari halaman web tersebut.
LANJUTAN...
• Fungsi pengolahan gambar terdiri dari:
– Image alignment / perataan teks pada gambar
– Image adjustment / ukuran gambar
– Image alternate / teks gambar
– Image link / link gambar
• File gambar yang umum digunakan ada 3 jenis
format image yaitu :
– GIF (Graphical Interchange Format) (.GIF)
– JPEG (Joint Photographic Expert Image) (.JPG)
– PNG (Portable Network Graphics) (.PNG)
• Tag <img />
• Sintaks Penulisanya :
<img src="url" />
ATRIBUT TAG <img />
• src fungsinya url dari file image/direktori
gambar
• align fungsinya untuk letak gambar pada teks,
nilai atributnya left, right, top, middle, dan
bottom
• width fungsinya untuk lebar gambar dalam
satuan pixel
• height fungsinya untu tinggi gambar dalam
satuan pixel
• alt fungsinya untuk menampilkan teks
pengganti jika gambar tidak tampil di browser
• border fungsinya untuk memberi bingkai
CONTOH PENGGUNAAN TAG IMG
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Img</title>
</head>
<body>
<p>
Logo Amikom
<img src="amikom.jpg" width="223"
height="226" align="bottom"
alt="Logo Amikom" /> menggunakan
align="bottom".
</p>
Hasil </body>
</html>
OUTPUT DI BROWSER
IMAGE SEBAGAI LINK
<!DOCTYPE html>
<html>
<head>
<title>Img sebagai suatu link</title>
</head>
<body>
<p>
<b>Untuk mengunjungi website amikom klik
gambar di samping</b><a
href="image.html"><img src="tombol.jpg"
width="50" height="50" align="middle"
alt="Tombol" /> </a>
</p>
</body>
</html>
Hasil
OUTPUT DI BROWSER
FORM & INPUT HTML
• Form merupakan salah satu elemen HTML
yang digunakan untuk mendapatkan masukan
dari pengguna web.
• Tag awal <form> Tag Penutup </form>
• Sintaks Penulisannya :
<form>
.
Input elemen
.
</form>
ATRIBUT FORM
Atribut Penjelasan
Method Metode pengiriman data ke tujuan, yaitu:
GET : mengirimkan data pada server dengan cara meletakkan data

pada bagian akhir URL
POST : mengirimkan datanya secara terpisah.
Action Menentukan lokasi dari script yang akan memproses data dari form
JENIS MASUKAN DALAM FORM
• Text, digunakan untuk mengisi suatu nilai
dapat berupa teks atau angka.
• Radio, elemen isian berupa pilihan dimana
hanya satu pilihan yang dapat dilakukan.
• Checkbox, elemen yang menyediakan
beberapa pilihan bisa lebih dari satu.
• List, elemen pilihan dalam bentuk daftar.
• Button, elemen berupa tombol untuk
melakukan suatu proses.
• Submit, elemen tombol yang digunakan untuk
memanggil url.
JENIS MASUKAN DALAM FORM
• Reset, elemen tombol yang digunakan untuk
mengembalikan kondisi awal.
• Image, digunakan sebagai pengganti button,
berupa gambar yang dapat melakukan proses.
• Textarea, elemen yang dapat menampung
kumpulan teks ketikan dari user.
• File, elemen button yang dapat memanggil file
atau gambar dari storage.
• Password, elemen berupa teks yang khusus
digunakan untuk mengisi password.
TAG <INPUT>
TAG <INPUT> (Cont . . .)
TAG <SELECT>
TAG <TEXTAREA>
CONTOH TAG <INPUT>
<!DOCTYPE html>
<html>
<head>
<title>Contoh Tag Input Form</title>
</head>
<body>
<form>
Nama <input type="text" name="nama" /> <br>
Password <input type="password" name="pwd" /> <br>
<input type="radio" name="sex" value="male" checked />
Pria
<input type="radio" name="sex" value="female" />
Wanita <br>
<input type="checkbox" name="jurusan" value="ti"
/>Teknik Informatika<br>
<input type="checkbox" name="jurusan" value="si" />
Sistem Informasi <br>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
Hasil </body>
</html>
OUTPUT DI BROWSER
CONTOH TAG <SELECT>
<!DOCTYPE html>
<html>
<head>
<title>Contoh Tag Select</title>
</head>
<body>
<form>
Pilih Jenis Kendaraan
<select name="motor">
<option value="yamaha">Yamaha</option>
<option value="honda">Honda</option>
<option value="suzuki">Suzuki</option>
</select>
</form>
</body>
Hasil </html>
OUTPUT DI BROWSER
CONTOH TAG <TEXTAREA>
<!DOCTYPE html>
<html>
<head>
<title>Contoh Tag Textarea</title>
</head>
<body>
<form>
<textarea name="alamat" cols="55"
rows="5"></textarea>
</select>
</form>
</body>
</html>
Hasil
OUTPUT DI BROWSER
ELEMEN LABEL, FIELDSET, &
LEGEND
• Elemen label memberikan fasilitas untuk
menambahkan teks pada elemen masukan form.
• Elemen fieldset merupakan elemen yang digunakan
untuk membungkus beberapa elemen masukan form,
untuk menandakan bahwa elemen-elemen tersebut
merupakan elemen masukan yang berada pada satu
grup yang sama, atau saling berhubungan.
• Elemen legend digunakan untuk memberikan judul
pada sebuah fieldset.
• Sintak Penulisannya :
<fieldset>
<legend>Judul</legend>
</fieldset>
CONTOH
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Label, Fieldset dan
Legend</title>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>Form Login</legend>
<label for="username">Username</label>
<input type="text" name="username" id="username"/>
<label for="password">Password</label>
<input type="password" name="password"
id="password"/>
<input type="submit" name="submit" value="Login"/>
</fieldset>
</form>
</body>
Hasil </html>
OUTPUT DI BROWSER
TABEL HTML
• Tabel digunakan untuk menyajikan data dalam
bentuk kolom dan baris.
• Sebuah tabel mempunyai judul, baris untuk
informasi, dan sel untuk setiap itemnya.
• Tag awal <table> Tag Penutup </table>
• Sintaks Penulisannya :
<table>
<tr>
<td>Data Tabel</td>
<tr>
</table>
ELEMEN-ELEMEN TABEL
Elemen Penjelasan
<table> . . . </table> Tag pembentuk tabel. jika border disertakan, maka tabel akan
tampil disertai border. Nilai border 0 – 30.
<caption> . . . </caption> Pembentuk judul tabel. judul dapat diberi tag apa saja.
<tr> . . . </tr> Penjelaskan baris tabel dalam tabel. atribut yang dipakai :
align(left, center dan right) atau valign(top, middle dan
bottom).
<th> . . . </th> Pembentuk sel header tabel. Secara default teks dalam sel ini
di tebalkan dan di tampilkan ditengah.
<td> . . . </td> Pembentuk sel data dalam tabel.

ATRIBUT TAG <table>
Atribut Penjelasan
Align={left | center | right} Posisi horizontal tabel
Background Menentukan gambar latar belakang tabel
Bgcolor Menentukan warna latar belakang tabel

Border Menentukan tebal bingkai tabel
Bordercolor Menentukan warna bingkai tabel
Bordercolorlight Menentukan warna depan bingkai tabel
Bordercolordark Menentukan warna bayangan bingkai tabel
Cellspacing Menentukan jarak spasi antar sel
Cellpadding Menentukan jarak isi sel dengan bingkai
Height Menentukan tinggi tabel
Width Menentukan lebar tabel
Valign=top| middle|bottom Menentukan posisi vertikal teks dalam sel

ATRIBUT TAG <tr>
Atribut Penjelasan
Align={left | center | right} Posisi horizontal teks dalam sel
Bgcolor Menentukan warna latar belakang sel
Bordercolor Menentukan warna bingkai sel
Bordercolorlight Menentukan warna depan bingkai sel
Bordercolordark Menentukan warna bayangan bingkai sel
Height Menentukan tinggi sel

ATRIBUT TAG <td> dan <th>
Atribut Penjelasan
Align={left | center | right} Posisi horizontal teks dalam sel
Background Menentukan gambar latar belakang sel
Bgcolor Menentukan warna latar belakang sel

Border Menentukan tebal bingkai sel
Bordercolor Menentukan warna bingkai sel
Bordercolorlight Menentukan warna depan bingkai sel
Bordercolordark Menentukan warna bayangan bingkai sel
Colspan Menentukan jumlah kolom yang di gabung
Rowspan Menentukan jumlah baris yang di gabung
Height Menentukan tinggi sel
Width Menentukan lebar sel
Nowrap Menentukan teks agar tetap satu baris

CONTOH TABEL
<!DOCTYPE html>
<html>
<head>
<title>Contoh Tabel</title>
</head>
<body>
<table width="500" border="1“
bordercolor="#FF0000">
<caption>Membuat Tabel</caption>
<tr>
<td width="200">Baris 1 Kolom 1</td>
<td width="180">Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
</body>
Hasil </html>
OUTPUT DI BROWSER
ADA PERTANYAAN?
TERIMA KASIH
REFERENSI
• Sidik, Betha dan Pohan, I. Husni. (2011). Pemrograman
Web dengan HTML disertai lebih dari 200 contoh program
beserta tampilan grafisnya. Bandung: Informatika.
• Arief, M. R. (2011). Pemrograman Web Dinamis
menggunakan PHP dan MySQL. Yogyakarta: Andi Offset.
• Ahlihi Masruro, S.Kom. Modul Pemrograman Web. STMIK
AMIKOM Yogyakarta

Pemrograman Eb

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pemrograman Eb

Diunggah oleh

Hak Cipta:

Format Tersedia

PEMROGRAMAN WEB

UNIVERSITAS AMIKOM YOGYAKARTA

GET : mengirimkan data pada server dengan cara meletakkan data

POST : mengirimkan datanya secara terpisah.

<td> . . . </td> Pembentuk sel data dalam tabel.

Bgcolor Menentukan warna latar belakang tabel

Width Menentukan lebar tabel

Valign=top| middle|bottom Menentukan posisi vertikal teks dalam sel

Valign=top| middle|bottom Menentukan posisi vertikal teks dalam sel

Bgcolor Menentukan warna latar belakang sel

Nowrap Menentukan teks agar tetap satu baris

Anda mungkin juga menyukai