pengenalan perancangan web -...
TRANSCRIPT
Pengenalan Perancangan Web 2016
Ld.Farida | STMIK AMIKOM Yogyakarta
19
6. Image Gambar pada halaman sebuah web merupakan salah satu daya tarik pengguna.
Umumnya browser web dapat menampilkan inline image (yaitu gambar yang disajikan
bersamaan dengan teks). File gambar yang biasanya digunakan adalah format PNG,
JPG, GIF. Pemilihan sebuah gambar yang akan ditampilkan di sebuah halaman web,
harus memperhatikan kebutuhan. Setiap gambar yang ditampilkan akan menambah
waktu upload dan download, sehingga dapat memperlambat tampilan dari sebuah
halaman web. Tag yang digunakan untuk menyisipkan gambar dalam sebuah dokumen
HTML adalah tag <img>.
Penulisan sintaksnya adalah:
Tag <img> memiliki atribut antara lain:
Atribut Keterangan
src URL dari file image/direktori gambar
align Letak gambar pada teks, nilai atributnya left, right, top, middle, dan bottom
width Lebar gambar dalam satuan pixel
height Tinggi gambar dalam satuan pixel
alt Menampilkan teks pengganti jika gambar tidak tampil di browser
border Memberi bingkai pada gambar
Contoh: latihan25.html
Catatan: untuk modifikasi gambar, ubah value dari atribut yang digunakan
6.1. Teks Alternatif untuk Image
Teks alternatif untuk image bermanfaat ketika sebuah browser tidak dapat
menampilkan gambar dikarenakan pengaturan mode teks atau pengguna yang memang
sengaja mematikan pengaturan untuk menampilkan sebuah gambar dengan tujuan
mempercepat tampilan informasi. HTML menyediakan atribut alt yang dapat digunakan
untuk membantu persoalan tersebut.
<img src=”namagambar” />
<html>
<head>
<title>Latihan Image HTML</title>
</head>
<body>
Contoh Posisi Image:
<p><img src=”gambar1.jpg” width=”70” height=”70” align=”bottom”
border=”1”> Image menggunakan atribut width, height, align(bottom), dan
border.</p>
</body>
</html>
Pengenalan Perancangan Web 2016
Ld.Farida | STMIK AMIKOM Yogyakarta
20
Contoh: latihan26.html
6.2. Image sebagai Link
Link pada halaman HTML dapat juga dibuat dengan menggunakan image. Image
dapat dimanfaatkan sebagai icon pada menu atau tombol lainnya yang dapat
mempermudah pengguna ketika menggunakan sebuah halaman website.
Contoh: latihan27.html
<html>
<head>
<title>Latihan Image HTML Teks Alternatif</title>
</head>
<body>
Contoh Posisi Image:
<p><img src=”gambar1.jpg” width=”70” height=”70” align=”bottom”
border=”1” alt=”Gambar Pertama Saya”> Image menggunakan bantuan teks
alternatif.</p>
</body>
</html>
<html>
<head>
<title>Latihan Image HTML Teks Alternatif</title>
</head>
<body>
Contoh Image sebagai Link:
<p><a href=”latihan15.html><img src=”gambar1.jpg” width=”70”
height=”70” align=”bottom” border=”1”></a></p>
</body>
</html>
Pengenalan Perancangan Web 2016
Ld.Farida | STMIK AMIKOM Yogyakarta
21
7. Tabel Tabel digunakan untuk menyajikan data dalam bentuk baris dan kolom. Umumnya
setiap kolom menunjukkan data sejenis dan setiap baris yang terdiri atas kolom-kolom
menunjukkan kelompok data dalam satu kesatuan.
Elemen-elemen yang ada di dalam tabel:
Elemen Keterangan
<table> ... </table> Mendefinisikan sebuah tabel dalam HTML
<caption>...</caption> Mendefinisikan tulisan untuk judul tabel. Posisi default dari judul adalah di tengah atas tabel. Atribut align=”botton” dapat digunakan untuk menempatkan judul pada bagian bawah tabel. Catatan: Judul dapat diberi tag apa saja.
<tr>...</tr> Menspesifikasikan sebuah baris tabel dalam tabel
<th>...</th> Mendefinisikan sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan di tengah
<td>...</td> Mendefinisikan sebuah sel data tabel
Atribut yang ada di dalam tabel:
Elemen Keterangan
Align=[ left | center | right ] Alignment horizontal untuk sel
Background Gambar latar belakang tabel
Bgcolor Warna latar belakang
Border Tebal bingkai tabel
Bordercolor Warna bingkai tabel
Bordercolorlight Warna depan bingkai tabel
Bordercolordark Warna bayangan bingkai tabel
Colspan=n Jumlah n kolom sel digabung
Rowspan=n Jumlah n baris sel digabung
Nowrap Matikan wrapping dalam sel
Valign =[ top | middle | bottom ] Definisi alignment vertikal dalam sel
Contoh: latihan28.html
Next code...
<html>
<head>
<title>Pengenalan Tabel</title>
</head>
<body>
<table>
<tr>
<th width=50>NO</th>
<th width=200>NAMA</th>
<th width=120>NIM</th>
</tr>
<tr>
<td>1.</td>
<td>Andi</td>
<td>16.12.1111</td>
</tr>
Pengenalan Perancangan Web 2016
Ld.Farida | STMIK AMIKOM Yogyakarta
22
7.1. Tabel dengan Atribut
Atribut bertujuan untuk mengatur tabel sesuai kebutuhannya. Berikut contoh tabel
yang memanfaatkan beberapa atribut align, border, bgcolor, dan width.
contoh: latihan29.html
7.2. Cellpadding dan Cellspacing
Cellpadding digunakan untuk membuat spasi lebih di antara sel dan bordernya.
Cellpadding membuat tampilan di dalam tabel menjadi lebih nyaman untuk dibaca
karena terdapat jeda ruang kosong antara tulisan dan tabelnya. Sedangkan Cellspacing
digunakan untuk menambah jarak antarsel. Ilustrasi dapat dilihat pada Gambar 7.1 dan
Gambar 7.2.
<tr>
<td>2.</td>
<td>Amir</td>
<td>16.12.1112</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Pengenalan Tabel</title>
</head>
<body>
<table border=”1” width=”50%”>
<tr bgcolor=”red”>
<th width=50>NO</th>
<th width=200>NAMA</th>
<th width=120>NIM</th>
</tr>
<tr>
<td align=”center”>1.</td>
<td align=”left”>Andi</td>
<td align=”center”>16.12.1111</td>
</tr>
<tr>
<td align=”center”>2.</td>
<td align=”left”>Amir</td>
<td align=”center”>16.12.1112</td>
</tr>
</table>
</body>
</html>
Pengenalan Perancangan Web 2016
Ld.Farida | STMIK AMIKOM Yogyakarta
23
Gambar 7.1 Ilustrasi Cellpadding
Gambar 7.2 Ilustrasi Cellspacing
contoh: latihan30.html
Next code...
<html>
<head>
<title>Pengenalan Tabel dengan Cellpadding dan Cellspacing</title>
</head>
<body>
<h3>Tabel dengan Cellpadding</h3>
<table border=”1” cellpadding=”10”>
<tr>
<th width=”30”>NO</th>
<th width=”200”>NAMA</th>
<th width=”120”>NIM</th>
</tr>
<tr>
<td>1.</td>
<td>Andi</td>
<td>16.12.1111</td>
</tr>
Pengenalan Perancangan Web 2016
Ld.Farida | STMIK AMIKOM Yogyakarta
24
7.3. Colspan dan Rowspan
Colspan dan rowspan digunakan untuk mendefiniskan sel tabel yang dilebarkan
lebih dari satu baris atau satu kolom.
contoh: latihan31.html
Next code...
<html>
<head>
<title>Belajar Tabel dengan Colspan dan Rowspan</title>
</head>
<body>
<h3>Daftar Nama Mahasiswa</h3>
<table border="1" >
<tr>
<th width="50" rowspan="2">No.</th>
<th width="250" colspan="2">Data Mahasiswa</th>
</tr>
<tr>
<th>Nama</th>
<th>NIM</th>
</tr>
<tr>
<td>1.</td>
<td>Andi</td>
<td>16.12.1111</td>
</tr>
<tr>
<td>2.</td>
<td>Amir</td>
<td>16.12.1112</td>
</tr>
</table>
<h3>Tabel dengan Cellpadding</h3>
<table border=”1” cellpadding=”10”>
<tr>
<th width=”50”>NO</th>
<th width=”200”>NAMA</th>
<th width=”120”>NIM</th>
</tr>
<tr>
<td>1.</td>
<td>Andi</td>
<td>16.12.1111</td>
</tr>
<tr>
<td>2.</td>
<td>Amir</td>
<td>16.12.1112</td>
</tr>
</table>
</body>
</html>
Pengenalan Perancangan Web 2016
Ld.Farida | STMIK AMIKOM Yogyakarta
25
<tr>
<td>2.</td>
<td>Boni</td>
<td>16.12.1112</td>
</tr>
</table>
</body>
</html>
Pengenalan Perancangan Web 2016
Ld.Farida | STMIK AMIKOM Yogyakarta
26
8. Form dan Input HTML Form adalah elemen HTML yang digunakan untuk mendapatkan masukan dari
pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman
HTML. Form biasa digunakan untuk membuat aplikasi web berbasis database dan
aplikasi pendaftaran. Untuk membuat form, digunakan tag awal <form> dan diakhiri
dengan tag penutup </form>.
Penulisan sintaksnya adalah:
Atribut Tag Form
Atribut Keterangan
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
8.1. Jenis Masukan dalam Form
Jenis masukan dalam form dibedakan menjadi:
1. Text, digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada server.
Nilai yang dimasukkan dapat berupa angka ataupun teks;
2. Radio, menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih;
3. Check box, menyediakan beberapa pilihan, pilihan dapat lebih dari satu;
4. List, menyediakan pilihan dalam bentuk list pilihan (daftar). Dapat memilih lebih
dari satu;
5. Button, elemen yang mendefiniskan tombol untuk melakukan proses pada halaman
HTML;
6. Submit, elemen tombol yang digunakan untuk memanggil URL, setelah input selesai
dimasukkan;
7. Reset, elemen tombol yang digunakan untuk mengembalikan ke kondisi awal;
8. Image, digunakan sebagai pengganti button, berupa gambar yang berfungsi sama
seperti button;
9. Text area, elemen yang digunakan untuk menampung data dalam bentuk teks;
10. File,elemen button yang dapat memanggil file atau gambar dari storage;
11. Password, elemen berupa teks yang khusus digunakan untuk mengisi password.
<form action=”url” method=”get|post”>
....
</form>
Pengenalan Perancangan Web 2016
Ld.Farida | STMIK AMIKOM Yogyakarta
27
8.2. Contoh-contoh Input
8.2.1. Text Area
Tag <textarea> digunakan untuk membuat suatu text area yaitu sebuah kotak teks
dengan multi baris. Di dalam text area, dapat dituliskan karakter yang tidak terbatas. Tag
<textarea> memiliki atribut antara lain:
Atribut Keterangan
Name Mendefiniskan nama obyek textarea
Rows Menentukan jumlah baris textarea
Cols Menentukan lebar textarea
8.2.2. Select Area
Tag <select> digunakan untuk membuat dropdown sederhana. Dropdown adalah
daftar yang dapat dipilih. Tag ini memiliki beberapa atribut yaitu:
Atribut Keterangan
Name Mendefiniskan nama obyek select
Size Menentukan berapa pilihan yang akan ditampilkan.
Multiple Mengizinkan untuk memilih lebih dari satu
contoh: latihan32.html
<html>
<head>
<title>Mengenal Tag Textarea dan Tag Select</title>
</head>
<body>
<table border=”1”>
<tr>
<td>Pilih Jenis Buku</td>
<td>
<select name=”pendidikan”>
<option value=”komputer”>Komputer</option>
<option value=”kedokteran”>Kedokteran</option>
<option value=”psikologi”>Psikologi</option>
<option value=”ekonomi”>Ekonomi</option>
</select>
</td>
</tr>
<tr>
<td>Sinopsis</td>
<td>
<textarea name=”sinosis” cols=55” rows=”5”></textarea>
</td>
</tr>
</table>
</body>
</html>
Pengenalan Perancangan Web 2016
Ld.Farida | STMIK AMIKOM Yogyakarta
28
8.2.3. Input
Tag <input> digunakan untuk membuat komponen-komponen yang digunakan
untuk meminta informasi dari user, misal kotak teks, kotak pilihan, tombol, dan lain-lain.
Tag <input> tidak memerlukan tag penutup. Tag ini memiliki beberapa atribut antara
lain:
Atribut Keterangan
Name Mendefiniskan nama obyek input. Atribut ini harus dituliskan kecuali untuk tipe submit dan clear.
Size Menentukan ukuran kotak teks.
Maxlenght Menentukan jumlah maksimum karakter yang dapat dimasukkan pada kotak teks.
Value Kotak teks : Menentukan teks yang tertulis. Check box atau radio : menentukan nilai item yang dipilih Submit atau reset : menentukan teks yang tertulis pada tombol
Checked hanya digunakan untuk check box atau radio. Menentukan pilihan yang terpilih secara default
Type Menentukan tipe input yang dibuat
Tipe input antara lain:
a. Text digunakan untuk membuat kode teks;
b. Password digunakan untuk membuat kotak teks dengan menampilkan tanda *;
c. Check box digunakan untuk membuat suatu daftar pilihan yang dapat dipilih
lebih dari satu;
d. Radio digunakan untuk membuat suatu daftar pilhan yang hanya dipilih satu
saja;
e. File digunakan untuk memanggil file atau gambar dari storage
f. Reset digunakan untuk membuat tombol yang fungsinya untuk menghapus
semua isi form yang telah diberikan
g. Submit digunakan untuk membuat tombol yang fungsinya untuk mengirimkan
data form agar diolah.
contoh: latihan33.html
Next code...
<html>
<head>
<title>Input Data Mahasiswa</title>
</head>
<body>
<h4>Tambah Data Mahasiswa</h4>
<form method=”post” action=”#”>
<table border=”0,5”>
<tr>
<td>Nama</td>
<td>: <input type=”text” name=”nama” size=”60”></td>
</tr>
Pengenalan Perancangan Web 2016
Ld.Farida | STMIK AMIKOM Yogyakarta
29
<tr>
<td>Alamat</td>
<td>: <textarea name=”alamat” cols=”50” rows=”5”></textarea></td>
</tr>
<tr>
<td>Kelas</td>
<td>:
<select name=”kelas”>
<option value=”pilih” selected>- Pilih Kelas -</option>
<option value=”15S1SI01”>15-S1SI-01</option>
<option value=”15S1SI02”>15-S1SI-02</option>
<option value=”15S1SI03”>15-S1SI-03</option>
<option value=”15S1SI04”>15-S1SI-04</option>
<option value=”15S1SI05”>15-S1SI-05</option>
</select>
</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:
<input type=”radio” name=”gender” value=”P” checked> Pria
<input type=”radio” name=”gender” value=”W”> Wanita
</td>
</tr>
<tr>
<td>UKM yang Diikuti</td>
<td>:
<input type=”checkbox” name=”amcc”>AMCC <br>
<input type=”checkbox” name=”jurnalistik”>JURNALISTIK <br>
<input type=”checkbox” name=”mayapala”>MAYAPALA<br>
<input type=”checkbox” name=”taekwondo”>TAEKWONDO
</td>
</tr>
<tr>
<td colspan=2>
<input type=”submit” value=”SIMPAN”>
<input type=”reset” value=”RESET”>
</td>
</tr>
</table>
</body>
</html>
Pengenalan Perancangan Web 2016
Ld.Farida | STMIK AMIKOM Yogyakarta
30
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.
Satya, Barka (2015). Modul Pemrograman Web. STMIK AMIKOM Yogyakarta
Arifin, Oki(2015). Modul Pengenalan Perancangan Web. STMIK AMIKOM Yogyakarta